ติดตั้งแอป ChatGPT ในเครื่อง: ทำไม & ทำอย่างไร

ChatGPT ได้รับการออกแบบมาเพื่อตอบคำถามของคุณอย่างรวดเร็ว คุณสามารถเข้าถึง ChatGPT ทางออนไลน์ได้ อย่างไรก็ตาม หากคุณต้องการติดตั้งแอป คู่มือนี้สามารถช่วยได้

เราจะพูดถึงวิธีการทีละขั้นตอนในการติดตั้งแอป ChatGPT ในเครื่อง เพื่อให้คุณสามารถใช้เพื่อรับการตอบสนองที่รวดเร็วขึ้นพร้อมความเป็นส่วนตัวที่เพิ่มขึ้น

เหตุใดจึงต้องติดตั้งแอป ChatGPT ในเครื่อง

การติดตั้งโมเดล AI บนคอมพิวเตอร์ของคุณมีประโยชน์หลายประการ ซึ่งบางส่วนจะกล่าวถึงที่นี่:

• รวดเร็วและตอบสนอง – คุณสามารถเรียกใช้งานได้โดยตรงบนอุปกรณ์ของคุณ ซึ่งหมายความว่าแอปจะใช้โปรเซสเซอร์และหน่วยความจำของอุปกรณ์ ซึ่งจะทำงานได้อย่างมีประสิทธิภาพมากกว่าเมื่อทำงานบนเซิร์ฟเวอร์ระยะไกล
• เพิ่มความเป็นส่วนตัวและความปลอดภัย – การใช้แอปในเครื่องจะช่วยเพิ่มความเป็นส่วนตัวและความปลอดภัยของข้อมูลส่วนตัวของคุณ ข้อมูลจะไม่ถูกถ่ายโอนจากอุปกรณ์ของคุณไปยังเซิร์ฟเวอร์ระยะไกลอีกต่อไป
• ปรับแต่งได้ – การติดตั้งแอปในเครื่องจะช่วยให้คุณสามารถปรับแต่งแอปได้ตามความต้องการและความต้องการของคุณ คุณสามารถเปลี่ยนอินเทอร์เฟซผู้ใช้ ฟังก์ชันของแอป และอื่นๆ ได้
• ไม่จำเป็นต้องเผชิญกับการหยุดทำงาน – หากติดตั้งแอปไว้ในเครื่อง คุณจะไม่ต้องลงชื่อเข้าใช้อีกครั้งหรือรอให้เซิร์ฟเวอร์ตอบกลับหากไม่ว่าง จึงไม่มีการหยุดทำงาน

ฉันจะติดตั้งแอป ChatGPT ในเครื่องได้อย่างไร

ก่อนดำเนินการติดตั้งแอป ChatGPT ในเครื่อง คุณควรพิจารณาดำเนินการตรวจสอบต่อไปนี้:

• ขั้นแรก ติดตั้งส่วนขยาย Node.js บนโค้ด VS
• จากนั้นรับส่วนขยาย Git บนโค้ด VS

1. สร้างโฟลเดอร์และเปิดใน Visual Studio Code

1. คลิกขวาบนพื้นที่ว่างบนเดสก์ท็อป เลือก ใหม่, แล้ว โฟลเดอร์.
2. เปลี่ยนชื่อโฟลเดอร์เป็น Open_AI_ChatGPT แอป.
3. กด หน้าต่าง คีย์, พิมพ์ รหัส Visual Studioแล้วคลิก เปิด.
4. ไปที่ ไฟล์ เมนู และเลือก เปิดโฟลเดอร์.
5. เลือกโฟลเดอร์แล้วคลิก เลือกโฟลเดอร์.
6. ต่อไปให้ไปที่ ดู เมนูและเลือก เทอร์มินัล.

2. ตรวจสอบว่ามีการติดตั้ง Node.js หรือไม่

1. พิมพ์รหัสต่อไปนี้เพื่อตรวจสอบว่าคุณได้ติดตั้ง node.js แล้วกด Enter: โหนด -v
2. หากมีข้อผิดพลาด ให้ดำเนินการขั้นตอนต่อไป
3. ไปที่ เว็บไซต์ Node.js และดาวน์โหลด Node.js
4. ดับเบิลคลิกเพื่อเปิดไฟล์ตัวติดตั้ง คลิก ต่อไป.
5. ตอนนี้ยอมรับข้อกำหนดและเงื่อนไขทั้งหมดแล้วคลิก ต่อไป.
6. คลิก ต่อไป บนหน้าต่างต่อไปนี้ทั้งหมด จากนั้นคลิก ติดตั้ง เพื่อเริ่มการติดตั้ง
7. ตอนนี้รีสตาร์ท Visual Studio Code
8. เมื่อเสร็จแล้ว ให้กลับไปที่เทอร์มินัล พิมพ์รหัสต่อไปนี้เพื่อสร้าง ที่เก็บวานิลลา JavaScriptแล้วกด Enter: สร้าง npm [ป้องกันอีเมล] ลูกค้า -- แม่แบบวานิลลา
9. ถัดไปพิมพ์ วาย แล้วกด Enter
10. เลือก วนิลา เป็นกรอบเมื่อได้รับแจ้ง
11. เลือก จาวาสคริปต์ เป็นตัวแปรเมื่อถูกถาม คุณจะเห็นไฟล์และโฟลเดอร์จำนวนมากที่สร้างขึ้นภายใต้โฟลเดอร์แอป Open_AI_ChatGPT

3. ติดตั้งการพึ่งพา

1. พิมพ์คำสั่งต่อไปนี้เพื่อเข้าสู่ไคลเอนต์ไดเร็กทอรีและกด Enter: ซีดี .\client\
2. จากนั้นคัดลอกและวางคำสั่งต่อไปนี้แล้วกด Enter: การติดตั้ง npm
3. ไปที่ลิงค์นี้และดาวน์โหลดโฟลเดอร์ซิปที่ชื่อ สินทรัพย์
4. ตอนนี้คัดลอกโฟลเดอร์สินทรัพย์ที่แยกออกมาไปยังโฟลเดอร์ไคลเอนต์
5. ถัดไป ลบไฟล์ vite.svg และ counter.js
6. สุดท้ายย้าย ไฟล์ favicon จาก สินทรัพย์ โฟลเดอร์ไปที่ สาธารณะ โฟลเดอร์

4. เขียนโค้ดใน style.css

1. คัดลอกและวางรหัสที่กล่าวถึงด้านล่างตามที่อยู่ในโฟลเดอร์ style.css:
   @นำเข้า URL(" https://fonts.googleapis.com/css2?family=Alegreya+Sans:[ป้องกันอีเมล];300;400;500;700;800;900&display=swap");
* {
 ขอบ: 0;
 ช่องว่างภายใน: 0;
 ขนาดกล่อง: border-box;
 ครอบครัวแบบอักษร: "Alegreya Sans", sans-serif;
}
ร่างกาย {
พื้นหลัง: #343541;
}
#แอป {
ความกว้าง: 100vw;
ความสูง: 100vh;
พื้นหลัง: #343541;
จอแสดงผล: ดิ้น;
ทิศทางโค้งงอ: คอลัมน์;
จัดรายการ: ศูนย์;
ปรับเนื้อหา: ช่องว่างระหว่าง;
}
#chat_container {
ดิ้น: 1;
ความกว้าง: 100%;
ความสูง: 100%;
ล้น-y: เลื่อน;
จอแสดงผล: ดิ้น;
ทิศทางโค้งงอ: คอลัมน์;
ช่องว่าง: 10px;
-ms-overflow-style: ไม่มี;
ความกว้างของแถบเลื่อน: ไม่มี;
ช่องว่างภายในด้านล่าง: 20px;
พฤติกรรมการเลื่อน: เรียบ;
}
/* ซ่อนแถบเลื่อน */
#chat_container::-webkit-แถบเลื่อน {
จอแสดงผล: ไม่มี;
}
.wrapper {
ความกว้าง: 100%;
ช่องว่างภายใน: 15px;
}
.ai {
พื้นหลัง: #40414F;
}
.แชท {
ความกว้าง: 100%;
ความกว้างสูงสุด: 1280px;
ขอบ: 0 อัตโนมัติ;
 จอแสดงผล: ดิ้น;
ทิศทางโค้งงอ: แถว;
จัดรายการ: flex-start;
ช่องว่าง: 10px;
}
.ประวัติโดยย่อ {
ความกว้าง: 36px;
ความสูง: 36px;
รัศมีเส้นขอบ: 5px;
พื้นหลัง: #5436DA;
จอแสดงผล: ดิ้น;
ปรับเนื้อหา: ศูนย์;
จัดรายการ: ศูนย์;
}
.ai .profile {
พื้นหลัง: #10a37f;
}
.โปรไฟล์ img {
ความกว้าง: 60%;
ความสูง: 60%;
พอดีวัตถุ: มี;
}
.ข้อความ {
ดิ้น: 1;
สี: #dcdcdc;
ขนาดตัวอักษร: 20px;
ความกว้างสูงสุด: 100%;
ล้น-x: เลื่อน;
/*
* white space หมายถึงช่องว่าง แท็บ หรืออักขระขึ้นบรรทัดใหม่ที่ใช้ในการจัดรูปแบบโค้ด CSS
* ระบุว่าควรจัดการพื้นที่สีขาวภายในองค์ประกอบอย่างไร ซึ่งคล้ายกับค่า "ก่อน" ซึ่งบอกเบราว์เซอร์ให้ถือว่าพื้นที่สีขาวทั้งหมดมีนัยสำคัญ และสงวนไว้ตามที่ปรากฏในซอร์สโค้ดทุกประการ
* ค่า pre-wrap ช่วยให้เบราว์เซอร์สามารถตัดบรรทัดข้อความยาวๆ หลายๆ บรรทัดได้หากจำเป็น
* ค่าเริ่มต้นสำหรับคุณสมบัติ white-space ใน CSS คือ "ปกติ" สิ่งนี้บอกให้เบราว์เซอร์ยุบอักขระช่องว่างหลายตัวลงในช่องว่างเดียว และตัดข้อความลงในหลายบรรทัดตามความจำเป็นเพื่อให้พอดีกับคอนเทนเนอร์
*/
พื้นที่สีขาว: ห่อล่วงหน้า;
-ms-overflow-style: ไม่มี;
ความกว้างของแถบเลื่อน: ไม่มี;}
/* ซ่อนแถบเลื่อน */
.message::-webkit-scrollbar {
จอแสดงผล: ไม่มี;
}
รูปร่าง {
ความกว้าง: 100%;
ความกว้างสูงสุด: 1280px;
ขอบ: 0 อัตโนมัติ;
ช่องว่างภายใน: 10px;
พื้นหลัง: #40414F;
จอแสดงผล: ดิ้น;
ทิศทางโค้งงอ: แถว;
ช่องว่าง: 10px;
}
พื้นที่ข้อความ {
ความกว้าง: 100%;
สี: #fff;
ขนาดตัวอักษร: 18px;
ช่องว่างภายใน: 10px;
พื้นหลัง: โปร่งใส;
รัศมีเส้นขอบ: 5px;
ขอบ: ไม่มี;
เค้าโครง: ไม่มี;
}
ปุ่ม {
โครงร่าง: 0;
เส้นขอบ: 0; เคอร์เซอร์: ตัวชี้;
พื้นหลัง: โปร่งใส;
}
แบบฟอร์ม img {
ความกว้าง: 30px;
ความสูง: 30px;
}

5. เขียนโค้ดใน Index.html

1. พิมพ์รหัสต่อไปนี้ในไฟล์ index.html:
   
   
   
   
   
   
   
   
   
   
   
   
   
   

   
   
   
   

   
   
   
   
   
   
2. กด Ctrl + S เพื่อบันทึกสคริปต์
3. ไปที่บานหน้าต่างด้านซ้ายใน Visual Studio Code และเปลี่ยนชื่อ main.js เป็น script.js

6. เรียกใช้คำสั่งบน Terminal

1. ไปที่เทอร์มินัลแล้วกด Ctrl + ค เพื่อดูว่าคุณจะเขียนคำสั่งได้ที่ไหน คุณควรอยู่ในโฟลเดอร์ไคลเอนต์ หากไม่มี ให้พิมพ์คำสั่งต่อไปนี้แล้วกด Enter: ลูกค้าซีดี
2. พิมพ์คำสั่งต่อไปนี้แล้วกด Enter: npm เรียกใช้ dev
3. คุณจะได้รับที่อยู่เว็บเพื่อดูว่ามันเป็นอย่างไร หากคุณได้รับข้อผิดพลาดที่กล่าวถึงในภาพหน้าจอ ให้ดำเนินการต่อ

7. เขียนโค้ดในไฟล์ script.js

1. ลบเนื้อหาที่มีอยู่ในไฟล์ script.js และคัดลอกและวางรหัสต่อไปนี้:
   นำเข้าบอทจาก './assets/bot.svg'
   นำเข้าผู้ใช้จาก './assets/user.svg'
   แบบฟอร์ม const = document.querySelector ('แบบฟอร์ม');
   const chatContainer = document.querySelector('#chat_container');
   ให้ loadInterval;
   ตัวโหลดฟังก์ชัน (องค์ประกอบ) {
   element.textContent = '';
   loadInterval = setInterval(() => {
   // อัปเดตเนื้อหาข้อความของตัวบ่งชี้การโหลด
   element.textContent += '.';
   // หากตัวบ่งชี้การโหลดถึงสามจุด ให้รีเซ็ต
   ถ้า (องค์ประกอบ.textContent '...') {
   element.textContent = '';
   }
   }, 300)
   }
   ฟังก์ชัน typeText (องค์ประกอบ ข้อความ) {
   ให้ดัชนี = 0;
   ให้ช่วง = setInterval (() => {
   ถ้า (ดัชนี < text.length) {
   element.innerHTML += text.charAt (ดัชนี);
   ดัชนี ++;
   } อื่น {
   clearInterval (ช่วงเวลา);
   }
   }, 20)
   }
   ฟังก์ชัน createUniqueId() {
   การประทับเวลา const = Date.now();
   const RandomNumber = Math.random();
   const เลขฐานสิบหก = RandomNumber.toString (16);
   ส่งคืน `id-${timestamp}-${hexadecimalString}`;
   }
   ฟังก์ชัน chatStripe (isAi ค่า รหัสเฉพาะ) {
   กลับ (
   `
   
   
   

   
   

   
   src=${คือไอ? บอท: ผู้ใช้}
   alt="${isAi? 'บอท': 'ผู้ใช้'}"
   />
   

   
   

   ${มูลค่า}

   
   

   
   
   
   `
   )
   }
   const handleSubmit = async (e) => {
   e.preventDefault();
   ข้อมูล const = ใหม่ FormData (แบบฟอร์ม);
   // แถบแชทของผู้ใช้
   chatContainer.innerHTML += chatStripe (เท็จ, data.get('พรอมต์'));
   // เพื่อล้างค่า textarea ที่ป้อน
   form.reset();
   // แถบแชทของบอท
   const uniqueId = createUniqueId();
   chatContainer.innerHTML += chatStripe (จริง, " ", รหัสเฉพาะ);
   // เพื่อโฟกัสเลื่อนไปที่ด้านล่าง
   chatContainer.scrollTop = chatContainer.scrollHeight;
   // div ข้อความเฉพาะ
   const messageDiv = document.getElementById (รหัสเฉพาะ);
   // ข้อความDiv.innerHTML = "..."
   ตัวโหลด (messageDiv);
   การตอบสนอง const = รอการดึงข้อมูล (' http://localhost: 8001/', {
   วิธีการ: 'โพสต์',
   ส่วนหัว: {
   'ประเภทเนื้อหา': 'แอปพลิเคชัน/json'
   },
   เนื้อความ: JSON.stringify({
   พรอมต์: data.get('พรอมต์')
   })
   })
   clearInterval (ช่วงโหลด);
   messageDiv.innerHTML = '';
   ถ้า (response.ok) {
   ข้อมูล const = รอการตอบกลับ json ();
   const parsedData = data.bot.trim();
   พิมพ์ข้อความ (messageDiv, parsedData);
   } อื่น {
   const err = รอการตอบกลับข้อความ ();
   messageDiv.innerHTML = "มีบางอย่างผิดพลาด";
   แจ้งเตือน (ผิดพลาด);
   }
   }
   form.addEventListener('ส่ง', handleSubmit);
   form.addEventListener('keyup', (e) => {
   ถ้า (e.keyCode 13) {
   จัดการส่ง (e);
   }
   })
2. จากนั้นกด Ctrl + ส เพื่อบันทึกสคริปต์

8. สร้างโฟลเดอร์ใหม่ภายในโฟลเดอร์แอป Open_AI_ChatGPT และติดตั้งโมดูล

1. สร้างโฟลเดอร์ใน แอป Open_AI_ChatGPT โฟลเดอร์และตั้งชื่อ เซิร์ฟเวอร์.
2. เปิด เทอร์มินัล และกด Crtl + ค เพื่อหยุดแอพที่กำลังทำงานอยู่
3. พิมพ์คำสั่งต่อไปนี้แล้วกด Enter เพื่อออกจากโฟลเดอร์ Client: ซีดี ..
4. คัดลอกและวางคำสั่งต่อไปนี้เพื่อป้อน เซิร์ฟเวอร์ ไดเร็กทอรีและกด Enter: เซิร์ฟเวอร์ซีดี
5. พิมพ์คำสั่งต่อไปนี้แล้วกด Enter เพื่อสร้างไฟล์ package.json ในโฟลเดอร์เซิร์ฟเวอร์: npm เริ่มต้น -y
6. หากต้องการติดตั้งการพึ่งพา ให้พิมพ์คำสั่งต่อไปนี้แล้วกด Enter สิ่งนี้จะสร้างไฟล์ใหม่ชื่อ package-lock.json: npm ติดตั้ง cors dotenv express nodemon openai

9. สร้างคีย์ API และกล่าวถึงใน .env

1. ไปที่ เปิดเว็บไซต์ API และเข้าสู่ระบบ
2. ตอนนี้คลิก ส่วนตัว และเลือก ดูคีย์ API.
3. คลิก สร้างรหัสลับใหม่ และคัดลอกคีย์
4. ใน เซิร์ฟเวอร์ โฟลเดอร์ สร้างไฟล์ใหม่และตั้งชื่อ .env.
5. ใน .env ให้พิมพ์โค้ดต่อไปนี้หลังจากแทนที่คีย์ API ด้วยคีย์ที่คุณคัดลอกมาจากเว็บไซต์ Open API แล้วกด Enter: OPENAI_API_KEY="คีย์ API"

10. สร้างไฟล์ server.js ใหม่และเขียนสคริปต์

1. สร้างไฟล์ใหม่ในโฟลเดอร์เซิร์ฟเวอร์และเปลี่ยนชื่อเป็น server.js
2. คัดลอกและวางสคริปต์ต่อไปนี้ในไฟล์นี้แล้วกด Ctrl+ส เพื่อบันทึกไฟล์:

นำเข้าด่วนจาก 'ด่วน';
นำเข้า * เป็น dotenv จาก 'dotenv';
นำเข้าคอร์จาก 'คอร์';
นำเข้า { การกำหนดค่า OpenAIApi } จาก 'openai';
dotenv.config();
การกำหนดค่า const = การกำหนดค่าใหม่ ({
apiKey: process.env. OPENAI_API_KEY
});
const openai = OpenAIApi ใหม่ (การกำหนดค่า);
แอพ const = ด่วน ();
app.use (คอร์ ());
app.use (express.json());
app.get('/', async (req, res) => {
res.status (200).send({
ข้อความ: 'สวัสดีจาก GPT!'
})
});
app.post('/', async (req, res) => {
พยายาม {
พรอมต์ const = req.body.prompt;
การตอบสนอง const = รอ openai.createCompletion ({
รุ่น: "text-davinci-003",
พรอมต์: `${prompt}`,
อุณหภูมิ: 0 // ค่าที่สูงขึ้นหมายความว่าแบบจำลองจะมีความเสี่ยงมากขึ้น
max_tokens: 3000, // จำนวนโทเค็นสูงสุดที่จะสร้างเมื่อเสร็จสิ้น โมเดลส่วนใหญ่มีความยาวตามบริบทเท่ากับ 2048 โทเค็น (ยกเว้นโมเดลใหม่ล่าสุดที่รองรับ 4096)
top_p: 1, // ทางเลือกอื่นในการสุ่มตัวอย่างด้วยอุณหภูมิ เรียกว่า การสุ่มตัวอย่างนิวเคลียส
frequency_penalty: 0.5, // ตัวเลขระหว่าง -2.0 ถึง 2.0 ค่าบวกจะลงโทษโทเค็นใหม่ตาม ความถี่ที่มีอยู่ในข้อความ ลดโอกาสที่แบบจำลองจะทำซ้ำบรรทัดเดิม คำต่อคำ
Presence_penalty: 0, // ตัวเลขระหว่าง -2.0 ถึง 2.0 ค่าบวกจะลงโทษโทเค็นใหม่โดยขึ้นอยู่กับว่าโทเค็นเหล่านั้นปรากฏในข้อความหรือไม่ เพิ่มโอกาสที่โมเดลจะพูดคุยเกี่ยวกับหัวข้อใหม่
});
res.status (200).send({
บอท: response.data.choices[0].text
});
} จับ (ข้อผิดพลาด) {
console.log (ข้อผิดพลาด);
res.status (500).send (ข้อผิดพลาด || 'มีบางอย่างผิดพลาด');
}
});
app.listen (5000, () => console.log('เซิร์ฟเวอร์ AI เริ่มต้นเมื่อ http://localhost: 8001'));

11. เขียนโค้ดใน package.json

1. คัดลอกและวางรหัสต่อไปนี้แล้วกด Ctrl + ส เพื่อบันทึก:

{
"ชื่อ": "เซิร์ฟเวอร์",
"เวอร์ชัน": "1.0.0",
"คำอธิบาย": "",
"ประเภท": "โมดูล",
"สคริปต์":{
"เซิร์ฟเวอร์": "เซิร์ฟเวอร์ nodemon"
},
"คำหลัก": [],
"ผู้เขียน": "",
"ใบอนุญาต": "ISC",
"การพึ่งพา": {
"คอร์": "^2.8.5",
"dotenv": "^16.0.3",
"ด่วน": "^4.18.2",
"โหนดมอน": "^2.0.20",
"openai": "^3.1.0"
}
}

12. ทดสอบรหัส

1. ตอนนี้ คลิกเมนู Terminal บน Visual Studio Code แล้วเลือก Spilled Terminal
2. คุณจะมีสองขั้ว เรียกพวกเขาว่า Terminal Server และ Terminal Client
3. บนเซิร์ฟเวอร์เทอร์มินัล กด Ctrl + C พิมพ์คำสั่งต่อไปนี้เพื่อเข้าสู่ไดเร็กทอรีเซิร์ฟเวอร์ และกด Enter: cd server
4. ถัดไป คัดลอกและวางคำสั่งต่อไปนี้แล้วกด Enter เพื่อเรียกใช้เซิร์ฟเวอร์: เซิร์ฟเวอร์รัน npm
5. คลิกที่ลิงค์ที่แสดงและคุณจะเห็นข้อความสวัสดีจาก GPT บนหน้าเว็บ
6. ตอนนี้ที่ Terminal Client ให้กด Ctrl + C พิมพ์คำสั่งต่อไปนี้เพื่อเข้าสู่ไดเร็กทอรีไคลเอ็นต์ และกด Enter: ลูกค้าซีดี
7. คัดลอกและวางคำสั่งต่อไปนี้แล้วกด Enter เพื่อเรียกใช้ไคลเอ็นต์: npm เรียกใช้ dev
8. จากนั้นคลิกที่ลิงค์และพิมพ์ สวัสดี คุณสบายดีไหม; คุณจะเห็นว่าบอทกำลังหาคำตอบอยู่

13. ติดตั้งแอป Git Bash และกำหนดค่าด้วยบัญชี GitHub ของคุณ

1. คุณสามารถข้ามขั้นตอนนี้ได้หากคุณกำหนดค่าไว้แล้ว ดาวน์โหลดแอป Git Bash.
2. เข้าสู่ระบบของคุณ บัญชี GitHub.
3. ในขณะที่ติดตั้ง โปรดบันทึกลงในโฟลเดอร์ Open_AI_ChatGPT
4. จากนั้น กดปุ่ม Windows พิมพ์ แก้ไขตัวแปรสภาพแวดล้อมระบบ แล้วคลิก เปิด
5. ดับเบิลคลิกที่เส้นทาง แล้วคลิกแก้ไข
6. เพิ่มเส้นทางของไฟล์ git ที่นี่ จากนั้นคลิกตกลงและตกลง
7. เรียกใช้ Git Bash พิมพ์คำสั่งต่อไปนี้หลังจากแทนที่ชื่อผู้ใช้ด้วยชื่อผู้ใช้บัญชี GitHub แล้วกด Enter: git config -- ชื่อผู้ใช้ทั่วโลก "ชื่อผู้ใช้"
8. คัดลอกและวางคำสั่งต่อไปนี้หลังจากแทนที่ที่อยู่อีเมลด้วยที่อยู่อีเมลของคุณแล้วกด Enter: git config --global user.email "ที่อยู่อีเมล"
9. ไปที่บัญชี GitHub คลิกลูกศรแบบเลื่อนลง แล้วเลือกการตั้งค่า ตอนนี้ไปที่การตั้งค่านักพัฒนาซอฟต์แวร์
10. ขยายโทเค็นการเข้าถึงส่วนบุคคล และเลือกโทเค็นแบบละเอียด คลิกสร้างโทเค็นใหม่
11. เปลี่ยนชื่อและเลือกความถูกต้อง จากนั้นคัดลอกโทเค็นและบันทึกไว้ในแผ่นจดบันทึก
12. พิมพ์คำสั่งต่อไปนี้ทีละรายการแล้วกด Enter: git config --global credential.helper wincredgit credential-manager-core กำหนดค่า
13. ทำตามคำแนะนำเพื่อกำหนดค่าและวางโทเค็นที่สร้างขึ้นเมื่อได้รับแจ้งให้ใส่รหัสผ่านของคุณ
14. ปิดแอป Git Bash

14. สร้างที่เก็บและเผยแพร่โค้ด

14.1 สร้างที่เก็บ

1. เข้าสู่ระบบของคุณ บัญชี GitHub.
2. ค้นหา ลูกศรแบบหล่นลง ถัดจากรูปโปรไฟล์ของคุณแล้วเลือก ที่เก็บของคุณ.
3. คลิก ใหม่.
4. พิมพ์ ชื่อที่เก็บ, เลือก สาธารณะแล้วคลิก สร้างที่เก็บ.
5. ไปที่รหัส VS กด Ctrl + คและตรวจสอบให้แน่ใจว่าคุณอยู่ในแอป Open_AI_ChatGPT หรือโฟลเดอร์รูท หากไม่มี ให้พิมพ์รหัสต่อไปนี้แล้วกด Enter: ซีดี
6. จากนั้นใน เซิร์ฟเวอร์ โฟลเดอร์ เพิ่มไฟล์ใหม่และตั้งชื่อ .gitignore.
7. ใน .gitignore ไฟล์ พิมพ์รหัสต่อไปนี้เพื่อให้แน่ใจว่า .env และ node_modules ไม่ได้ถูกผลักเข้าไป GitHub:
   .env
node_modules

14.2 เผยแพร่รหัสของคุณบนพื้นที่เก็บข้อมูล

1. ไปที่โค้ด VS คัดลอกและวางคำสั่งต่อไปนี้ทีละคำสั่ง แล้วกด Enter หลังจากทุกคำสั่ง: เริ่มต้นคอมไพล์git commit -m "กระทำครั้งแรก"git branch -M หลัก
2. พิมพ์คำสั่งต่อไปนี้หลังจากแทนที่ https://github.com/SrishtiSisodia/CHAT-BOT-APP ด้วยที่อยู่เก็บข้อมูลของคุณที่กล่าวถึงใน GitHub:
   git รีโมตเพิ่มต้นทาง https://github.com/SrishtiSisodia/CHAT-BOT-APP
3. ตอนนี้เพื่อพุชโค้ด พิมพ์คำสั่งต่อไปนี้แล้วกด Enter: git push -u กำเนิดหลัก
4. โหลดหน้า GitHub ของคุณใหม่ และรหัสของคุณจะถูกอัปโหลดที่นั่น
5. บนรหัส VS กด Ctrl + ค บนทั้ง Terminal Server และ Terminal Client เพื่อหยุดการทำงาน

15. ปรับใช้เซิร์ฟเวอร์

1. ไปเรนเดอร์ไฟล์ เว็บไซต์และลงทะเบียนโดยใช้ GitHub
2. คุณจะเห็นแดชบอร์ด คลิก ใหม่ จากนั้นเลือก บริการเว็บ
3. ค้นหาเชื่อมต่อพื้นที่เก็บข้อมูลใหม่ ป้อน URL ของพื้นที่เก็บข้อมูลของคุณภายใต้ที่เก็บ Public Git และคลิกเชื่อมต่อ
4. ในหน้าถัดไป เพิ่ม Name เลือก Region เลือก Branch เป็น main เลือก Root Directory เป็นเซิร์ฟเวอร์ เลือก Environment เป็น Node และพิมพ์ เริ่มคำสั่ง - เรียกใช้เซิร์ฟเวอร์ npm
5. คลิก ฟรี แล้วคลิก สร้างบริการเว็บ
6. เซิร์ฟเวอร์จะถูกปรับใช้ โปรดรอจนกว่าสถานะการปรับใช้จะเป็น Live
7. ไปที่ สิ่งแวดล้อม; สำหรับคีย์ ให้พิมพ์ OpenAI_API_Key และสำหรับค่า ให้พิมพ์คีย์ API ลับที่คุณสร้างขึ้นในขั้นตอนที่ 9
8. ตอนนี้คุณจะมีที่อยู่เว็บแล้ว เพิ่มลงในไฟล์ script.js จากนั้นในโค้ด VS ให้ไปที่ไฟล์ script.js และแทนที่ที่อยู่เว็บในโค้ดที่กล่าวถึงด้านล่างด้วยที่อยู่เว็บใหม่จากเว็บไซต์ที่แสดงผล:
   การตอบสนอง const = รอการดึงข้อมูล (' http://localhost: 8001/'การตอบสนอง const = รอการดึงข้อมูล (' https://chatgptapp-lswi.onrender.com/'
9. บน รหัส VS เทอร์มินัลให้พิมพ์คำสั่งต่อไปนี้ทีละคำ แล้วกด Enter หลังทุกคำสั่ง: คอมไพล์เพิ่มgit commit -m 'อัปเดต URL เซิร์ฟเวอร์'คอมไพล์กด

16. ปรับใช้ส่วนหน้า

1. ไปที่เว็บไซต์ Vercel.
2. คลิก เริ่มปรับใช้.
3. ภายใต้ นำเข้าที่เก็บ Gitคลิก ดำเนินการต่อด้วย GitHub.
4. พิมพ์ของคุณ ชื่อผู้ใช้ GitHub และเลือกชื่อที่เก็บแล้วคลิก นำเข้า.
5. ภายใต้ กำหนดค่าโครงการเลือกชื่อ
6. เปลี่ยน ไดเรกทอรีราก จาก / ถึง ลูกค้าคลิก ดำเนินการต่อ และ ปรับใช้.
7. กลับไปที่แดชบอร์ดของคุณแล้วคลิก เยี่ยม.
8. ตอนนี้คุณสามารถดูแอปพลิเคชัน

ดังนั้น นี่คือขั้นตอนโดยละเอียดในการติดตั้งแอป ChatGPT ในเครื่องของคุณ ติดอยู่ที่ไหนสักแห่ง? โปรดระบุคำถามหรือข้อกังวลของคุณในส่วนความคิดเห็นด้านล่าง