บทเรียนการสร้างเว็บไซต์พื้นฐาน

AI Assistant - ผู้ช่วยตอบคำถามอัจฉริยะ

เว็บไซต์นี้มีฟีเจอร์ AI Assistant ที่ใช้ Gemini 2.0 Flash จาก Google ช่วยตอบคำถามเกี่ยวกับการเขียนโปรแกรมและเนื้อหาในเว็บไซต์

วิธีการใช้งาน

1. เปิดแชท AI

คลิกที่ปุ่มสีม่วงมุมล่างขวาของหน้าจอ (ไอคอนแชท) เพื่อเปิดหน้าต่างแชท

2. ตั้งค่า API Key (ครั้งแรกเท่านั้น)

ก่อนใช้งานครั้งแรก คุณต้องตั้งค่า Gemini API Key:

ขั้นตอนการขอ API Key:

  1. ไปที่ Google AI Studio
  2. เข้าสู่ระบบด้วย Google Account
  3. คลิก "Create API Key"
  4. คัดลอก API Key ที่ได้

ตั้งค่า API Key ในแชท:

พิมพ์คำสั่งในแชท:

/setkey YOUR_API_KEY_HERE

ตัวอย่าง:

/setkey AIzaS.........

API Key จะถูกเก็บไว้ใน Browser ของคุณ (localStorage) ไม่ต้องตั้งค่าใหม่ทุกครั้ง

3. เริ่มถามคำถาม

หลังจากตั้งค่า API Key แล้ว คุณสามารถถามคำถามได้เลย เช่น:

ตัวอย่างคำถาม:

  • "อธิบาย Flexbox ให้ฟังหน่อย"
  • "ยกตัวอย่างโค้ด JavaScript สำหรับ Event Listener"
  • "SQL Injection คืออะไร และป้องกันอย่างไร"
  • "สร้างฟอร์ม Login ด้วย HTML และ CSS"
  • "ความแตกต่างระหว่าง let และ const คือ"
  • "เขียนโค้ด PHP เชื่อมต่อฐานข้อมูล MySQL"

คำสั่งพิเศษ

คำสั่ง คำอธิบาย
/setkey YOUR_KEY ตั้งค่า Gemini API Key
/clear ล้างประวัติการสนทนา (ทั้งหน้าจอและที่บันทึกไว้)

การบันทึกอัตโนมัติ

AI Assistant จะบันทึกข้อมูลต่อไปนี้ใน Browser (localStorage):

  • ✅ สถานะแชท - จำว่าเปิดหรือปิดอยู่ เมื่อเปลี่ยนหน้าจะคงสถานะเดิม
  • ✅ ประวัติการสนทนา - บันทึก 20 ข้อความล่าสุด เมื่อเปิดแชทใหม่จะแสดงประวัติเดิม
  • ✅ API Key - บันทึกไว้ไม่ต้องตั้งค่าใหม่ทุกครั้ง

หมายเหตุ: ข้อมูลทั้งหมดเก็บไว้ใน Browser ของคุณเท่านั้น ไม่ได้ส่งไปเซิร์ฟเวอร์

ความสามารถของ AI Assistant

AI Assistant สามารถช่วยคุณได้ในเรื่อง:

  • ✅ ตอบคำถามเกี่ยวกับ HTML, CSS, JavaScript
  • ✅ อธิบายแนวคิดการเขียนโปรแกรม
  • ✅ ให้ตัวอย่างโค้ดและอธิบาย
  • ✅ ช่วยแก้ไขปัญหาและ Debug
  • ✅ แนะนำ Best Practices
  • ✅ อธิบายเนื้อหาในเว็บไซต์ให้เข้าใจง่ายขึ้น

การจัดรูปแบบคำตอบ

AI Assistant รองรับการจัดรูปแบบ Markdown:

Code Blocks

ใช้ triple backticks สำหรับโค้ด:

```javascript
function hello() {
console.log("Hello World");
}
```

Inline Code

ใช้ single backticks: const x = 10;

Text Formatting

  • ตัวหนา: **ข้อความ** → ข้อความ
  • ตัวเอียง: *ข้อความ* → ข้อความ

Lists

- รายการที่ 1
- รายการที่ 2
- รายการที่ 3

Markdown Links:
[ข้อความ](URL) → ข้อความ

Auto Links:
URL ที่เป็นข้อความธรรมดาจะกลายเป็นลิงก์อัตโนมัติ:

Headers

# หัวข้อใหญ่
## หัวข้อรอง
### หัวข้อย่อย

ข้อควรระวัง

⚠️ ความเป็นส่วนตัว:

  • API Key ของคุณเก็บไว้ใน Browser เท่านั้น (ไม่ส่งไปเซิร์ฟเวอร์)
  • การสนทนาจะถูกส่งไปยัง Google Gemini API
  • อย่าแชร์ข้อมูลส่วนตัวหรือข้อมูลลับในแชท

⚠️ ข้อจำกัด:

  • AI อาจให้คำตอบที่ไม่ถูกต้อง 100% เสมอไป
  • ควรตรวจสอบโค้ดที่ได้รับก่อนนำไปใช้งานจริง
  • API มีข้อจำกัดการใช้งานฟรี (Quota)

การจัดการ API Key

ลบ API Key:

หากต้องการลบ API Key ออกจาก Browser:

  1. เปิด Developer Console (F12)
  2. ไปที่แท็บ Console
  3. พิมพ์: localStorage.removeItem('gemini_api_key')
  4. กด Enter

เปลี่ยน API Key:

เพียงพิมพ์คำสั่ง /setkey ใหม่ด้วย API Key ตัวใหม่

Quota และราคา

Gemini 2.0 Flash มี Free Tier ที่ใจกว้าง:

  • ฟรี: 15 requests ต่อนาที
  • ฟรี: 1,500 requests ต่อวัน
  • ฟรี: 1 ล้าน tokens ต่อวัน

สำหรับการใช้งานส่วนตัวและเรียนรู้ Free Tier น่าจะเพียงพอ

ดูข้อมูลเพิ่มเติม: Gemini API Pricing

แก้ไขปัญหา

ปัญหา: "API request failed"

  • ตรวจสอบว่า API Key ถูกต้อง
  • ตรวจสอบว่ายังมี Quota เหลืออยู่
  • ลองรอสักครู่แล้วถามใหม่

ปัญหา: "Invalid API Key"

  • ตรวจสอบว่าคัดลอก API Key ครบถ้วน
  • ตรวจสอบว่า API Key ยังใช้งานได้
  • ลองสร้าง API Key ใหม่

ปัญหา: แชทไม่เปิด

  • ลอง Refresh หน้าเว็บ
  • ตรวจสอบ Console (F12) ว่ามี Error หรือไม่
  • ลองใช้ Browser อื่น

เทคโนโลยีที่ใช้

  • AI Model: Google Gemini 2.0 Flash Experimental
  • API: Generative Language API
  • Frontend: Vanilla JavaScript
  • Storage: Browser localStorage

หมายเหตุ: ฟีเจอร์นี้ใช้ API Key ของคุณเอง ไม่มีค่าใช้จ่ายจากเว็บไซต์ และคุณควบคุมการใช้งานได้เต็มที่

เรียนจบบทนี้แล้ว?

ลองทำแบบฝึกหัดเพื่อทดสอบความเข้าใจ หรือไปบทถัดไปเลย!

กลับหน้าแรก