AI Product Chatbot

เจ้าของผลงานเล่าไว้แบบนี้

https://ai-product-chatbot-v2.vercel.app # AI Product Chatbot แชทบอทตอบคำถามลูกค้าเกี่ยวกับสินค้าในแคตตาล็อก สร้างด้วย **Next.js** และ **Google Gemini API** ## 📌 สิ่งที่พัฒนาในโปรเจกต์นี้ 1. **Next.js Full-Stack**: รวม Frontend (React) และ Backend (API Routes) ไว้ในโปรเจกต์เดียวกัน ทำให้ Deploy ขึ้นระบบ Serverless อย่าง Vercel ได้ง่ายมาก 2. **Hybrid Search แบบเบา (Fuse.js)**: ใช้ `Fuse.js` เพื่อค้นหาสินค้าจากคำหลัก (Keyword) และการจับคู่คำแบบยืดหยุ่น (Fuzzy Match) - รองรับ Typo หรือการพิมพ์ผิดขั้นสุดยอด (อนุญาตความคลาดเคลื่อนได้ถึง 50%) - มีระบบดักจับแปลงคำย่อ/ศัพท์สแลง (เช่น "ss" -> "samsung", "ซาวเวป" -> "soundwave") 3. **ระบบ Caching อัจฉริยะ (LRU Cache)**: ช่วยลดการใช้โควต้า Token ของ Gemini API โดยถ้าลูกค้าถามคำถามเดิม หรือคำถามที่คล้ายกันแบบมี Typo เล็กน้อย ระบบจะตอบจาก Cache ทันทีโดยไม่ต้องเรียก API ใหม่ 4. **Anti-Hallucination & Multi-turn**: บังคับให้บอทตอบอิงจากข้อมูลแคตตาล็อกเท่านั้น ห้ามเดาข้อมูลเองเด็ดขาด และสามารถจดจำบริบทการสนทนาต่อเนื่องในระดับ Session ได้ 5. **UI/UX พรีเมียม**: หน้าแชทออกแบบด้วยดีไซน์ Dark Theme แบบ Glassmorphism รองรับการแสดงผลตารางและการจัดรูปแบบแบบ Markdown --- ## 🚀 วิธีการรันโปรเจกต์ (Local) 1. **ติดตั้ง Dependencies** เปิด Terminal ชี้มาที่โฟลเดอร์โปรเจกต์ แล้วรันคำสั่ง: ```bash npm install ``` 2. **ตั้งค่า API Key** - ไปสร้าง API Key ฟรีที่ [Google AI Studio](https://aistudio.google.com/apikey) - สร้างไฟล์ชื่อ `.env.local` ในโฟลเดอร์โปรเจกต์ - นำ API Key ที่ได้มาใส่ในไฟล์ดังนี้: ```env GEMINI_API_KEY=ใส่_API_KEY_ของคุณที่นี่

โดย thawatchaiThipunya · ดูโพสต์ต้นทาง