สร้าง Chatbot ที่ขับเคลื่อนด้วย AI

Feb 2, 2026
วิธีการ
An illustration showing an android with an electronic brain in front of a globe marked with symbols indicated technological advancement, such as binary code, molecules and communications relays.

ปัญญาประดิษฐ์ (AI) ช่วยให้เราสามารถสร้างวิธีการใหม่ในการดูปัญหาที่มีอยู่จากการทบทวนกลยุทธ์ด้านสิ่งแวดล้อมให้กับวิธีที่เราเรียนรู้ โครงการของคุณ - ไม่ว่าจะเป็นแอพเว็บไซต์หรือเกม - สามารถใช้ประโยชน์จาก AI เพื่อให้พวกเขามีส่วนร่วมมากขึ้นง่ายต่อการใช้งานและมีผลลัพธ์ที่มีค่ามากขึ้น หนึ่งวิธีดังกล่าวเกี่ยวข้องกับการสร้าง Chatbot ภาษาธรรมชาติเพื่อช่วยให้ผู้ใช้มีปฏิสัมพันธ์กับเว็บไซต์ของคุณ

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

หากคุณอยู่ในขั้นตอนการวางแผนเว็บไซต์ใหม่คุณจะต้องมีคำแนะนำเกี่ยวกับทุกอย่างจากอุดมคติ สร้างเว็บไซต์ ซึ่ง เว็บโฮสติ้ง บริการให้เลือกดังนั้นตรวจสอบคำแนะนำของเรา การสร้างระบบการออกแบบใหม่หรือไม่ บันทึกไว้อย่างปลอดภัยใน การจัดเก็บเมฆ ดังนั้นจึงสามารถเข้าถึงทีมทั้งหมดของคุณได้ ตอนนี้เข้าสู่การสร้าง chatbot ...

01. สร้างบัญชี

ไปที่ dialogflow.com และสร้างบัญชีของคุณ ลงชื่อเข้าใช้และยอมรับการอนุญาตเพื่อเปิดใช้งาน DialogFlow เพื่อเข้าถึงบัญชีของคุณ

02. สร้างตัวแทน

DialogFlow ใช้คำว่า 'ตัวแทน' เพื่อแสดงอินสแตนซ์ของ AI ของคุณ คิดว่าตัวแทนเป็นข่าวกรองเสมือนจริงที่คุณกำลังสร้าง คุณสามารถมีตัวแทนจำนวนมากที่ทำงานให้คุณแต่ละคนมีบุคลิกภาพและวัตถุประสงค์ของตัวเอง

คลิกที่ปุ่ม 'สร้างตัวแทน' และป้อนชื่อตัวแทนของคุณ: 'HAL 9000'

03. สร้างเจตนา

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

04. ฝึกอบรม AI เพื่อความตั้งใจนี้

An image showing the Google Dialogflow interface – in the box that's marked 'USER SAYS', it reads 'open the door hal' and in the box marked 'DEFAULT RESPONSE', it reads 'Sorry Dave. I can't do that now'.

ฝึกอบรม AI เพื่อแสดงเจตจำนงด้วยวลีที่ผู้ใช้อาจใช้

ฝึกอบรม AI เพื่อให้เจตนานี้โดยการจัดหาวลีที่ผู้ใช้อาจใช้ NLP AI จะใช้รูปแบบเหล่านี้และได้มาเพื่อฝึกอบรมตัวแทน เพิ่มวลีการฝึกอบรมต่อไปนี้ในหน้าต่าง 'วลีการฝึกอบรม' และเพิ่มให้มากที่สุดเท่าที่คุณต้องการ:

  • เปิดประตู Pod Bay HAL '
  • เปิดประตู '
  • 'ให้ฉันใน HAL!'

05. เพิ่มการตอบกลับ

ต่อไปคุณต้องเพิ่มการตอบสนองที่ตัวแทนจะตอบกลับด้วย คุณป้อนสิ่งเหล่านี้ในหน้าต่าง 'ตอบสนอง' ลองทำสิ่งนี้:

  • 'ฉันกลัวว่าฉันทำอย่างนั้นเดฟ'
  • 'ฉันทำไม่ได้ตอนนี้'

จากนั้นกด 'เพิ่มการตอบกลับ' และ 'บันทึก' ขึ้นไปที่ด้านบนอีกครั้ง คุณจะเห็นการแจ้งเตือนว่าเอเจนต์กำลังได้รับการฝึกฝนแล้วพร้อมแล้วก็พร้อม

06. ทดสอบ chatbot

ทางด้านขวาของหน้าจอเป็นเครื่องมือทดสอบ Chatbot จะใช้บริการคำพูดต่อข้อความของ Google เพื่อแปลเสียงของคุณเป็นข้อความหากคุณลองใช้ คุณควรเห็นผลลัพธ์ของคำขอของคุณและการตอบสนองของตัวแทน AI ที่เลือก เจ๋งมาก!

07. สร้างและใช้นิติบุคคล

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

ในเมนูซ้ายมือคลิก 'เอนทิตี' พิมพ์ 'อารมณ์' สำหรับชื่อของเอนทิตีใหม่ของคุณ รักษา 'กำหนดความหมายของคำพ้องความหมาย' คลิกในตารางด้านล่างและพิมพ์ 'โกรธ' เป็นอารมณ์แรก จากนั้นคลิกทางขวาของนั้นและเพิ่มคำพ้องความหมายเช่น 'บ้า', 'อารมณ์เสีย' และอื่น ๆ จากนั้นเพิ่มรายการอื่นสำหรับ 'กลัว' และใช้คำพ้องความหมาย 'กลัว' 'กลัว' ฯลฯ ที่คุณชอบ กด 'บันทึก' เมื่อเสร็จสิ้น

ตอนนี้ได้ฝึกอบรมตัวแทนให้เข้าใจว่า 'โกรธ' และ 'กลัว' เป็นอารมณ์ที่ผู้ใช้สามารถสื่อสารได้ คำพ้องความหมายทั้งหมดนั้นเป็นรูปแบบที่อาจเกิดขึ้น AI จะสร้างบางอย่างเช่นกัน

08. สร้างเจตนาใหม่

ตอนนี้เรากำลังจะสร้างความตั้งใจใหม่ที่จะใช้เอนทิตี 'อารมณ์' ที่เราสร้างขึ้น เรียก 'อารมณ์' ที่ตั้งใจนี้แล้วคลิก 'บันทึก'

ถัดไปเพิ่มวลีการฝึกอบรมใหม่เช่น 'คุณทำให้ฉันกลัว' 'คุณทำให้ฉันบ้า' และ 'ฉันโกรธมาก' การใช้คำหลักที่โกรธแค้นและกลัว สิ่งนี้จะฝึกอบรมตัวแทนเพื่อทำความเข้าใจวิธีการต่าง ๆ ที่ผู้ใช้อาจวลีข้อความนี้

คุณจะสังเกตเห็นว่าระบบเน้นคำที่น่ากลัวและโกรธสำหรับคุณ มันตั้งค่าสถานะเหล่านี้เป็นเอนทิตี นอกจากนี้ยังเพิ่มรายการลงในหน้าต่าง 'การกระทำและพารามิเตอร์' สิ่งนี้ช่วยให้คุณสามารถใช้เอนทิตีเหล่านี้ในการตอบสนองของคุณเช่นกัน

09. เพิ่มการตอบสนองโดยใช้เอนทิตี 'อารมณ์' ใหม่

ในหน้าต่าง Responses เพิ่มการตอบสนองใหม่ที่ใช้นิติบุคคลใหม่นี้ หมายเหตุ '$' เพื่อแสดงถึงเอนทิตี '$ อารมณ์' ลองเพิ่มคำตอบเหล่านี้:

  • 'ฉันขอโทษที่คุณรู้สึกถึง $ อารมณ์เดฟ'
  • 'ความรู้สึก $ อารมณ์เป็นคำตอบของมนุษย์เดฟ'

คลิก 'เพิ่มการตอบกลับ' และกดปุ่ม 'บันทึก' ที่ด้านบนของหน้าจอเพื่อบันทึกความตั้งใจทั้งหมด

10. ทดสอบ chatbot ของคุณอีกครั้ง

ลองพูดหรือพิมพ์วลีต่อไปนี้ในเครื่องมือทดสอบ

  • 'คุณทำให้ฉันโกรธมาก'
  • 'คุณทำให้ฉันประหลาดใจ'

สังเกตว่ามันตอบสนองอย่างไรโดยใช้ 'กลัว' กับอันที่สอง? มันใช้คำพ้องความหมายของเรา 'Freaked Out' เพื่อทราบว่าเราหมายถึงกลัว เท่ห์มาก.

อย่าลังเลที่จะเล่นกับสิ่งนี้รวมถึงเพิ่มความตั้งใจและคำตอบเพิ่มเติมที่คุณชอบจากนั้นเราจะเพิ่มสิ่งนี้ลงในหน้าเว็บ

11. เปิดใช้งานการรวมเว็บ

An image showing Google Dialogflow's pop-up featuring a direct link and embeddable HTML snippet for a created chatbot.

การคลิกที่เว็บสาธิตจะแสดงตัวอย่างโค้ดที่คุณสามารถใช้เพื่อวางวิดเจ็ตลงในเว็บไซต์ของคุณเอง

หากต้องการเพิ่มลงในหน้าเว็บของคุณคลิก 'การรวม' บนเมนูซ้ายมือ จากนั้นคลิกที่กล่อง 'Demo' เพื่อเปิดตัวเลือกนั้น

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

12. สร้างเว็บเพจพื้นฐานและเพิ่มตัวอย่าง

สร้างหน้า HMTL พื้นฐานและรวมถึงตัวอย่างโค้ดถัดไป ลองใช้รหัสต่อไปนี้และอัปโหลดไปยังเซิร์ฟเวอร์ของคุณหรือเรียกใช้บนเซิร์ฟเวอร์ภายในเครื่องของคุณ แทนที่ตัวอย่างด้านล่างด้วยหนึ่งที่คุณคัดลอกจากตัวแทน DialogFlow ของคุณ: 

 & lt;! Doctype HTML & GT;
& lt; html & gt;
& lt; หัว & gt;
& lt; ชื่อ & gt; net - ai chatbot & lt; / ชื่อ & gt;
& lt; / head & gt;
& lt; ร่างกาย & gt;
& lt; iframe
    อนุญาต = "ไมโครโฟน;" ความกว้าง = "350" สูง = "430" SRC = "https://console.dialogflow.com/api-client/demo/embedded/bbd27d04-5546-4b62-85a5-c373575a33aa" & gt;
& lt; / iframe & gt;
& lt; / body & gt;
& lt; / html & gt;

บทความนี้ได้รับการตีพิมพ์ครั้งแรกในฉบับที่ 312 ของ NET นิตยสารที่ขายดีที่สุดในโลกสำหรับนักออกแบบเว็บไซต์และนักพัฒนา ซื้อปัญหา 312 หรือ สมัครสมาชิกสุทธิ .

กระตือรือร้นที่จะเรียนรู้เพิ่มเติมเกี่ยวกับวิธีที่คุณสามารถนำ AI ไปยังเว็บไซต์และแอพของคุณได้อย่างไร

An image promoting generate New York 2019 from April 24th -25th and speaker Josh Clark's keynote 'AI is your new design material'.

สร้างขึ้นการประชุมที่ได้รับรางวัลสำหรับนักออกแบบเว็บไซต์กลับไปที่ NYC เมื่อวันที่ 24-25 เมษายน! ในการจองตั๋วเยี่ยมชม www.generateconf.com

กระตือรือร้นที่จะเรียนรู้เพิ่มเติมเกี่ยวกับวิธีที่คุณสามารถนำ AI มาสู่การออกแบบของคุณ? Josh Clark ผู้ก่อตั้ง Big Medium จะให้ Keynote 'AI เป็นวัสดุการออกแบบใหม่ของคุณ' ในการสร้างนิวยอร์กในวันที่ 25 เมษายนซึ่งเขาจะสอนให้คุณใช้เนื้อหาที่สร้างขึ้นของเครื่อง, ข้อมูลเชิงลึกและการมีปฏิสัมพันธ์เป็นวัสดุการออกแบบ งานประจำวันของคุณ

สร้างนิวยอร์กวิ่งจาก 24-25 เมษายน - รับตั๋วของคุณตอนนี้ !

บทความที่เกี่ยวข้อง:

  • คำแนะนำเกี่ยวกับการมองเห็นคลาวด์ของ Google
  • 7 แนวโน้มเทคโนโลยีขนาดใหญ่ในปี 2019 ที่นักออกแบบจำเป็นต้องรู้
  • นักออกแบบจะถูกแทนที่ด้วยหุ่นยนต์หรือไม่?

วิธีการ - บทความยอดนิยม

วิธีการถ่ายภาพหน้าจอบน Mac

วิธีการ Feb 2, 2026

(เครดิตภาพ: Creative Bloq) หากคุณต้องการจับภาพทั้งห..

วิธีใช้โหมดแสงหรือมืดใน CSS

วิธีการ Feb 2, 2026

ข้อมูลจำเพาะของ CSS นั้นมีวิวัฒนาการ กระบวนการใ..

วิธีการสร้างข้อความความผิดพลาดและเอฟเฟกต์ภาพใน CSS

วิธีการ Feb 2, 2026

ในบทช่วยสอนนี้เราจะแสดงวิธีการสร้างเอฟเฟกต์ข้อความผิดพลาด เทคนิค�..

เตรียมกระดานสำหรับการวาดภาพใน 3 ขั้นตอนง่าย ๆ

วิธีการ Feb 2, 2026

ฉันจะแบ่งปันที่เร็วที่สุด เทคนิคการวาดภาพ..

ต้นแบบสภาพแวดล้อมขนาดใหญ่ใน 3DS Max

วิธีการ Feb 2, 2026

เป้าหมายของชิ้นนี้คือการผลิตชิ้นส่วนของ ศ..

กฎของการพิมพ์เว็บที่ตอบสนอง

วิธีการ Feb 2, 2026

การพิมพ์เว็บที่ตอบสนองนั้นยาก - คุณต้องมีทั้งการออกแบบสับและความร�..

วิธีการใช้โลโก้เวกเตอร์ของคุณจาก 2D เป็น 3D

วิธีการ Feb 2, 2026

ในบทช่วยสอนนี้เรากำลังดูวิธีที่คุณสามารถใช้..

วิธีการรวมแผนที่การกระจัดแกะสลักและทาสี

วิธีการ Feb 2, 2026

บางครั้งมันมีประสิทธิภาพมากขึ้นในการรวมแผนท..

หมวดหมู่