อัลฟ่า
1.0.0
Alpha เป็นบอทหรือเป็นฐานในการสร้าง แชทบอท บนเว็บของคุณเอง เราเริ่มต้นโปรเจ็กต์นี้เพราะเราคิดว่าแชทบอทมีประโยชน์มากและค่อนข้างสนุก อย่างไรก็ตาม สถานการณ์ปัจจุบันมีแชทบอทส่วนใหญ่จำกัดอยู่เฉพาะแพลตฟอร์มการส่งข้อความที่มีอยู่ เช่น Facebook ซึ่งค่อนข้างโอเค แต่ถ้าคุณต้องการให้บอทของคุณอยู่ที่อื่นบน เว็บ ?
คุณสามารถสร้างบอทของคุณเองและ กำหนดสไตล์และกฎการมองเห็นของคุณเอง ได้ เช่นเดียวกับ การควบคุมการปรับแต่งและตรรกะอย่างไม่จำกัด โซลูชันต่างๆ มีอยู่แล้ว แต่อาจมีข้อจำกัด มีค่าใช้จ่ายสูง และนำไปปฏิบัติได้ยาก
นี่คือจุดที่ Alpha มีประโยชน์ ไลบรารีนี้ได้รับการออกแบบมาเพื่อให้คุณสร้างบอทของคุณเองด้วยวิธีที่ง่ายมาก คุณเพียงแค่ต้อง:
ดาวน์โหลด
แทรกแผนผังถามตอบของคุณเอง
ใส่สีและรูปภาพของคุณเอง
Alpha ดูแลการเรนเดอร์ UI ทั้งหมดและการจัดการ สถานะแอปพลิเคชัน คุณไม่จำเป็นต้องรู้ React ใดๆ (หรือ Javascript สำหรับเรื่องนั้น) อย่างไรก็ตาม หากคุณรู้วิธีการใช้ React และ Redux คุณสามารถปรับแต่งการเรนเดอร์ของแอปบอทเพิ่มเติมได้ และแม้แต่ เชื่อมต่อกับแบ็คเอนด์หรือกลไก AI ที่คุณเลือกได้
การติดตั้ง
การปรับแต่งบทสนทนา
ให้คำแนะนำ
การปรับแต่ง UI
การปรับแต่งแอป React
การส่งอีเมล (TBD)
การเชื่อมต่อกับ Back-End ใด ๆ (TBD)
การเชื่อมต่อกับเอ็นจิ้น AI (TBD)
Alpha ถูกสร้างขึ้นเพื่อให้ทำงานบน Docker อย่างไรก็ตาม คุณสามารถรันได้ในเครื่องได้ตราบใดที่คุณมี NodeJS รวมถึง npm หรือ เส้นด้าย (แนะนำ!) ในระบบของคุณ
หากต้องการติดตั้งและรันในคอมพิวเตอร์ของคุณ เพียงรันคำสั่งต่อไปนี้ในเทอร์มินัลของคุณ คุณจะต้องติดตั้ง Docker (ดูคำแนะนำที่ไม่มี Docker ด้านล่าง):
โคลน repo นี้: git clone https://github.com/IcaliaLabs/alpha.git
นำทางไปยังไดเรกทอรี: cd alpha
ติดตั้งการอ้างอิง: docker-compose run --rm alpha yarn install
จากนั้นคุณสามารถยกเซิร์ฟเวอร์: docker-compose up alpha
แค่นั้นแหละ! คุณควรเห็นบอทสาธิตเริ่มทำงานในเบราว์เซอร์ของคุณ หากคุณเปิด localhost:3000 * ในเบราว์เซอร์ของคุณ
จุดสำคัญสองสามประการเมื่อทำงานในโหมดการพัฒนา:
แอปบอทจะเปิดใช้งาน Hot Reloading เพื่อให้คุณได้รับประโยชน์จาก Webpack + React
Redux DevTools จะเปิดใช้งานตามค่าเริ่มต้น เพื่อให้คุณสามารถตรวจสอบการกระทำ/สถานะของแอปได้แบบเรียลไทม์
เวลาระหว่างแต่ละข้อความบอท ถูกตั้งค่าเป็น 0 นี่เป็นการลดความหงุดหงิดของนักพัฒนาเมื่อต้องผ่านขั้นตอนการสนทนาครั้งแล้วครั้งเล่า อย่างไรก็ตาม คุณสามารถเปลี่ยนพฤติกรรมนี้ได้หากต้องการที่ app/containers/BotContainer/sagas.js
Heroku: เพียงแค่เรียกใช้ git push heroku master บอทนี้พร้อม Heroku แล้ว!
ท้องถิ่นด้วย Docker: หากคุณสามารถรวบรวมภาพเพื่อดูว่าภาพจะทำงานอย่างไรในการใช้งานจริง เราก็ได้รวมบิลด์เข้าด้วยกัน เพียงแค่เรียกใช้:
docker-compose up release
มันจะสร้างอิมเมจและยกเซิร์ฟเวอร์ที่ใช้งานจริง
หากคุณต้องการติดตั้งและรันโดยไม่ใช้ Docker คุณจะต้องติดตั้งการอ้างอิงทั้งหมดลงในไดเร็กทอรีของคุณโดยตรง:
เพื่อการพัฒนา:
โคลน repo นี้: git clone https://github.com/IcaliaLabs/alpha.git
นำทางไปยังไดเรกทอรี: cd alpha
รัน npm install หรือ yarn install เพื่อติดตั้งการขึ้นต่อกัน
เรียกใช้ npm start เพื่อเริ่มการทำงานของเซิร์ฟเวอร์
ไปที่ localhost:3000 ในเบราว์เซอร์ของคุณ
สำหรับการผลิต:
repo นี้พร้อม Heroku แล้ว เพียงทำ git push heroku master
หากคุณแก้ไขสคริปต์ของ package.json ด้วยเหตุผลบางประการ โปรดพิจารณาขั้นตอนเหล่านี้ก่อนที่จะปรับใช้กับเซิร์ฟเวอร์ที่ใช้งานจริง
สำหรับ AWS คุณสามารถทำตามขั้นตอนเดียวกันที่แสดงไว้ที่นี่
สำหรับเซิร์ฟเวอร์ Azure/Softlayer/อื่นๆ คุณจะต้อง ssh ไปยังเซิร์ฟเวอร์ ดึง repo ติดตั้งการพึ่งพาโดยใช้ yarn จากนั้นทำการ npm run build เพื่อสร้างโฟลเดอร์ ./build build ในที่สุดคุณก็สามารถเริ่มต้นเซิร์ฟเวอร์โดยใช้ start:prod หรือเพียงแค่รัน start:production แล้วมันจะรันขั้นตอนเหล่านี้ร่วมกันตามลำดับพร้อมทั้งการทดสอบ
ตรรกะทั้งหมดที่อยู่เบื้องหลังสิ่งที่บอทพูด รวมถึงตรรกะการถามตอบนั้นอยู่ภายใน BotMind ซึ่งอยู่ที่ app/BotMind/ เราเรียกบอทหรืออินพุตของผู้ใช้แต่ละรายการว่า Bubbles เนื่องจากมีการแสดงผลเช่นนี้ใน UI แชท
เพื่อปรับแต่งบทสนทนา คุณเพียงแค่ต้องเข้าใจและแก้ไข app/BotMind/_initialBubble.js และ app/BotMind/BotMindFlows/index.js
ไฟล์หลักสำหรับ BotMind คือ BotMind.js แต่ไฟล์นี้ทำหน้าที่เป็นตัวรวบรวมและผู้ส่งออกฟังก์ชันที่อยู่ที่ _initialBubble.js , _nextBubble.js และ _recommendationBubbles.js เท่านั้น ไฟล์ทั้งสามนี้จะดำเนินการตามตรรกะตามแผนผังถามตอบที่อยู่ภายใน app/BotMind/BotMindFlows/
ที่นี่คุณสามารถกำหนดจุดใดในแผนผังการสนทนาที่บอทของคุณเริ่มต้นเมื่อเริ่มต้นหรือเมื่อผู้ใช้เลือกที่จะเริ่มการสนทนาใหม่
ไฟล์นี้มีตรรกะว่าฟองหรือบทสนทนาใดที่บอทควรข้ามไปตามข้อความสุดท้ายจากบอทหรือจากผู้ใช้ คุณไม่จำเป็นต้องแก้ไขไฟล์นี้จริงๆ เว้นแต่คุณต้องการเจาะลึกการปรับแต่งที่ละเอียดยิ่งขึ้น ดำเนินการต่อด้วยความเสี่ยงของคุณเอง
ไฟล์นี้ดำเนินการตรรกะในการเลือกเส้นทางเมื่อควรส่งผ่าน shouldEstimateRecommendation: true ในกล่องโต้ตอบ ไฟล์นี้ทำงานตามคะแนนสะสมโดย ระบบกระเป๋า ระหว่างการสนทนา คุณไม่จำเป็นต้องแก้ไขไฟล์นี้จริงๆ เว้นแต่คุณต้องการเจาะลึกการปรับแต่งที่ละเอียดยิ่งขึ้น ดำเนินการต่อด้วยความเสี่ยงของคุณเอง
BotMindFlows ถ่ายทอดสดที่ app/BotMind/BotMindFlows/ ตามค่าเริ่มต้นที่นี่ คุณจะพบเพียงไฟล์ index.js แต่หากแผนผังการสนทนาของคุณเริ่มใหญ่เกินไป คุณสามารถสร้างไฟล์ของคุณเองและใช้ index.js เพื่อรวมเข้าด้วยกันโดยใช้ตัวดำเนินการแพร่กระจายเช่นนี้
import greetings from './conversation1';
import designSprint from './conversation2';
import designSprintQuestions from './conversation3';
const questions = {
...conversation1,
...conversation2,
...conversation3,
}
export default questions; แต่ละครั้งที่ BotMind วิเคราะห์ตำแหน่งที่จะไป (ภายใน _nextBubble.js ) ก็คาดว่าจะพบแฮชของคำถามภายใน app/BotMind/BotMindFlows/index.js คำถามประกอบด้วย... คุณเดาได้ แฮชคำถาม-คำตอบแต่ละรายการ ที่นี่คุณสามารถเริ่มวางตรรกะและความลื่นไหลของการสนทนาได้ ตัวอย่างเช่น ในการสาธิตของเรา คุณจะพบสิ่งต่อไปนี้:
คำถาม const = {start:{botPrompt: "สวัสดีมนุษย์ ฉันชื่อ อัลฟ่า ฉันเป็น แชทบอท ที่ยอดเยี่ยม",answers: [{nextId: "myPurpose"}] },วัตถุประสงค์ของฉัน:{botPrompt: "จุดประสงค์ของฉันคือการเป็นแชทบอตธรรมดาที่แนะนำผู้ใช้ และสามารถตัดสินใจและให้คำแนะนำได้",answer: [{nextId: "yourName"}]},yourName:{botPrompt: "แล้วคุณชื่ออะไร",input: textField(),answers: [ {answer: common_greetings,nextId: "greetings_notAName", }, {answer : common_greetings_negative,catchName: true,nextId: "asYouCanSee", },],},
...} ส่งออกคำถามเริ่มต้น;แฮชคำถามแต่ละข้อ จะต้องมีรหัสเฉพาะของตัวเอง เราขอแนะนำให้คุณสร้าง ID เหล่านี้ ให้อธิบายตนเองได้มากที่สุดเท่าที่จะเป็นไปได้ แม้ว่าจะหมายถึงการเขียนเพิ่มเติมอีกเล็กน้อย เนื่องจากเมื่อไลบรารีการสนทนาของบอทของคุณเติบโตขึ้น การจดจำว่า ID ใดที่ทำสิ่งที่อาจกลายเป็นปัญหาใน A ได้ ทุก ๆ คำถามที่แฮชเข้ามา ตัวเลือกต่อไปนี้:
botPrompt (จำเป็นต้องมี [สตริง]): ข้อความจากบอท
คำตอบ (ต้องมี [Array]): การตอบสนองที่แตกต่างกันที่บอทอาจมีขึ้นอยู่กับสิ่งที่ผู้ใช้ตอบ อาร์เรย์ประกอบด้วยแฮช ซึ่งแต่ละอันแสดงถึงผลลัพธ์ของการสนทนาที่เป็นไปได้ แฮชภายใน [ คำตอบ ] ใช้ตัวเลือกต่อไปนี้:
nextId (จำเป็นต้องมี [String]) : กำหนด ID การสนทนาที่บอทจะนำทางไปหากตรงตามคำตอบนี้ ในข้อความสุดท้ายจากบอทของคุณหรือก่อนที่คุณจะข้ามไป ประเมินคำแนะนำ ( ดูด้านล่าง ) คุณควรผ่านค่า null
คำตอบ ([สตริง | RegEx]) : คำตอบของผู้ใช้ที่จะทริกเกอร์แฮชนี้ หากคุณใช้ selectField หรือ tagsField เพื่อกำหนดคำตอบล่วงหน้าสำหรับผู้ใช้ คุณจะใช้สตริงได้ มิฉะนั้น คุณอาจต้องการใช้ RegEx (ดูตัวอย่าง)
sumToBags ([Array]) : ที่นี่คุณสามารถเริ่มเพิ่มคะแนนให้กับ BagsSystem เพื่อสร้างการควบคุมการไหลขั้นสูงและ/หรือส่งคำแนะนำหากนั่นคือจุดประสงค์ของบอทของคุณ โดยทั่วไป sumToBags จะมีลักษณะดังนี้: sumToBags:[{name: "recommendation1", points: 1}, {name: "recommendation2", points: 3}]
catchName ([Boolean]) : จะส่งสัญญาณให้ React เก็บชื่อผู้ใช้จากข้อความผู้ใช้ไว้ในสถานะแอป
catchCompanyName ([Boolean]) : เหมือนข้างบนแต่เป็นชื่อบริษัท
catchMail ([Boolean]) : เหมือนข้างบนแต่สำหรับที่อยู่อีเมล
catchPhone ([Boolean]) : เหมือนข้างบนแต่เป็นหมายเลขโทรศัพท์
shouldEstimateRecommendation ([Boolean]) : จะส่งสัญญาณให้ BotMind ทำลายโฟลว์ปกติและวิเคราะห์ Recommendation Bags เพื่อขับเคลื่อนการสนทนาไปข้างหน้า (ดูตัวอย่าง)
finishConversation ([Boolean]) : จะส่งสัญญาณให้บอทจบการสนทนาในบทสนทนาถัดไป เมื่อสิ่งนี้เกิดขึ้น การป้อนข้อมูลของผู้ใช้จะถูกปิดใช้งาน และบอทจะ "ออฟไลน์" จนกว่าผู้ใช้จะเลือก "รีสตาร์ท"
หมายเหตุ – หาก botPrompt ของคุณสำหรับส่วนบทสนทนานี้ไม่คาดว่าจะมีการแตกสาขา คุณสามารถส่ง nextId ได้ดังนี้:
answers: [
{
nextId: "hello"
}
] input ([Object]) : นี่เป็นการกำหนดประเภทของอินพุตที่ผู้ใช้สามารถใช้ได้ในระหว่าง botPrompt นี้ (ช่องข้อความ แท็ก เลือก ปิดใช้งาน ฯลฯ) โดยค่าเริ่มต้นอินพุตจะถูกปิดใช้งานช่องข้อความ เราขอแนะนำให้คุณใช้ตัวช่วย StateFormatter ที่รวมอยู่ที่จุดเริ่มต้นของไฟล์ index.js
type ([String]) : บอทกำลังส่งข้อความประเภทใด ("text", "media", "link" หรือ "transformedText")
varName ([String]) : หากคุณเลือก "transformedText" เป็นประเภทอินพุต คุณสามารถเขียน @varName ใน botPrompt ซึ่งจะอ้างอิงถึงตัวเลือกนี้ เมื่อบอทแสดงผลข้อความ มันจะค้นหาตัวแปรที่เก็บไว้ใน สถานะ React ( ดูด้านล่าง ) และแทนที่ @varName ด้วยค่าของตัวแปรนั้น
ตามที่กล่าวไว้ข้างต้น คุณสามารถเลือกที่จะจัดเก็บค่าบางค่าในสถานะ React และคำนวณปฏิกิริยา/โฟลว์/คำแนะนำตามค่าเหล่านี้ในภายหลัง เราเรียกสิ่งนี้ว่าระบบกระเป๋า
แนวคิดของระบบถุงคือเรากำหนด " ถุง " ไว้ล่วงหน้าซึ่งเราสามารถเติม " คะแนน " ได้ในขณะที่การสนทนาดำเนินไป สุดท้าย เมื่อคุณตัดสินใจโทรหา shouldEstimateRecommendation: true กับหนึ่งในแฮชคำถาม-คำตอบของคุณ _recommendationBubbles.js จะถูกเรียกใช้เพื่อตัดสินใจว่าจะแสดงอะไรต่อไปโดยพิจารณาจากคะแนนที่แต่ละถุงสะสมไว้
ขั้นตอนแรกคือการกำหนดกระเป๋าที่คุณจะใช้ที่ /app/BotMind/recommendationBags.js หากคุณไม่ได้กำหนด bag เหล่านี้ บอทจะทำงาน แต่จะไม่รู้ว่าต้องทำอย่างไรเมื่อคุณเรียก addToBags หรือ shouldEstimateRecommendation กระเป๋ามีลักษณะดังนี้:
const recommendationBags = [
{
name: "redWine",
defaultValue: 0,
goToBubbleId: "redWine_start",
},
{
name: "whiteWine",
defaultValue: 0,
goToBubbleId: "whiteWine_start",
},
{
name: "roseWine",
defaultValue: 0,
goToBubbleId: "roseWine_start",
},
]
export default recommendationBags; หลังจากนั้น คุณสามารถกำหนดเวลาที่จะเพิ่มโดยใช้ addToBags ในโฟลว์คำถาม-คำตอบของคุณได้ เช่น:
question1:{
botPrompt: "Which of these are you having?",
input: selectField(["Red Meat", "Sea Food", "Chicken", "Pasta"]),
answers: [
...
{
answer: "Red Meat",
nextId: "question2",
sumToBags:[{name: "redWine", points: 4}, {name: "roseWine", points: 1}]
},
...
]
} และเมื่อคุณพร้อมแล้ว ให้โทรไปที่ shouldEstimateRecommendation ดังนี้
question2:{
botPrompt: "What will you serve for dessert?",
input: selectField(["Chocolate", ...]),
answers: [
...
{
answer: "Chocolate",
shouldEstimateRecommendation: true,
nextId: null,
sumToBags:[{name: "redWine", points: 3}, {name: "whiteWine", points: 1}, {name: "roseWine", points: 2}]
},
...
]
}, ในตัวอย่างนี้ _recommendationBubbles.js จะถูกเรียก และดังนั้น bot bubble ถัดไปน่าจะเป็นฟองที่ redWine_start
เราใช้เสรีภาพในการกำหนด UI ล่วงหน้าเพื่อช่วยคุณประหยัดเวลา
สไตล์ส่วนใหญ่ของ Bot ถูกควบคุมโดยไฟล์เดียว /app/customization/styleVariables.js ที่นี่คุณสามารถเปลี่ยนสีเกือบทั้งหมดที่ใช้สำหรับองค์ประกอบทั้งหมด รวมถึงพื้นหลังของ UI
หากคุณต้องการเปลี่ยนแปลง UI เพิ่มเติม คุณสามารถเจาะลึกลงในไฟล์ สไตล์ชีต ได้ มีไฟล์โกลบอลอยู่ที่ /app/global-styles.js และคอมโพเนนต์หรือคอนเทนเนอร์บางส่วนมีไฟล์ styledComponents.js ของตัวเองในโฟลเดอร์ที่เกี่ยวข้องสำหรับคอมโพเนนต์แบบโมดูลาร์โดยเฉพาะ ไฟล์เหล่านี้ใช้ Styled-Components ซึ่งเป็นไลบรารี่ที่ยอดเยี่ยมสำหรับ React/ES6 (ซึ่งได้รับการพิจารณาอย่างเป็นทางการว่าเป็นตัวช่วยแนวทางปฏิบัติที่ดีที่สุด) ไฟล์เหล่านี้ใช้ตัวอักษรเทมเพลตที่ติดแท็กของ Javascript เพื่อประมาณค่า JS vars ด้วย CSS แต่ อย่าตกใจไป เพราะ สิ่งเหล่านี้สามารถจัดการได้เหมือนกับ CSS/SCSS ทั่วไป
หมายเหตุ - ความตั้งใจของเราคือการค่อยๆ โยกย้ายไปยังส่วนประกอบที่มีสไตล์แบบแยกส่วนอิสระ 100% เช่นที่พบใน /app/components/UserInput/styledComponents.js และกำจัดโค้ดทั้งหมดที่ /app/global-styles.js ออกไป
หากความปรารถนาในการปรับแต่งของคุณไม่พอใจเพียงแค่เล่นกับ CSS ของ coponents คุณสามารถปรับแต่งทุกอย่างตามที่คุณต้องการ แต่นอกเหนือจากจุดนี้ คุณจะต้องจัดการกับด้าน React (+Redux) ของแอป ( ดูด้านล่าง )
ด้าน React ทั้งหมดของ Alpha ได้รับการปรับโครงสร้างใหม่โดยใช้ repo ที่ยอดเยี่ยมนี้เป็นฐาน ใช้ประโยชน์จากแนวทางปฏิบัติที่ดีที่สุดสำหรับ React ซึ่งเป็นที่ยอมรับมากที่สุด ได้แก่ การใช้:
รีดักซ์
JS ที่ไม่เปลี่ยนรูป
เลือกอีกครั้ง
รีดักซ์-ซาก้า
สไตล์-ส่วนประกอบ
หากคุณต้องการเล่นซอกับด้าน React ของ Alpha คุณควรดู เอกสารเหล่านี้ ก่อน
เรามั่นใจว่าคุณต้องการส่งอีเมลอัตโนมัติไปยังเจ้าของบอทและผู้ใช้ปลายทางพร้อมสรุปการสนทนาของพวกเขา และเรากำลังดำเนินการหาวิธีที่จะนำเสนอโซลูชันที่ไม่เชื่อเรื่องพระเจ้าในส่วนหลังที่ยืดหยุ่นที่สุด จะอนุญาตให้เป็นเพียง "Plug & Play"
ตอนนี้ทางออกที่ดีที่สุดของคุณคือการเชื่อมต่อกับเซิร์ฟเวอร์ Node หรือ Express (หรือ Rails 5.1.x) และใช้ประโยชน์จากโซลูชันเมลของตนเอง คุณสามารถดูไฟล์ /app/BotMind/BotMailer.js ที่เราใช้สำหรับการใช้งานแบบ Rails ได้ แต่ ณ ตอนนี้ เราได้ลบตรรกะการส่งอีเมลทั้งหมดออกจาก /app/containers/BotContainer/sagas.js แล้ว /app/containers/BotContainer/sagas.js ดังนั้นคุณจะต้องเขียนนิยายเกี่ยวกับวีรชนของคุณเอง
บอทนี้ใช้ React + Webpack เท่านั้น ซึ่งหมายความว่าคุณควรจะสามารถเชื่อมต่อกับเฟรมเวิร์ก แบ็กเอนด์ ฯลฯ ได้ ตราบใดที่มันใช้งานได้กับ Webpack
ในขณะนี้ บอทสามารถเชื่อมต่อกับ API ใดๆ ได้อย่างราบรื่น แต่คุณจะต้องเขียนผู้สร้างแอ็กชันและนิยายเกี่ยวกับเรื่องราวของคุณเพื่อให้ได้พฤติกรรมที่คุณต้องการ
เราจะเพิ่มเอกสารประกอบที่นี่ในระหว่างที่เราปรับบอทนี้สำหรับการใช้งานที่แตกต่างกัน
เช่นเดียวกับข้างต้น เราตั้งใจที่จะอนุญาตให้บอทนี้เชื่อมต่อกับกลไกปัญญาประดิษฐ์อื่นๆ เช่น Api.ai และ Watson ของ IBM เพื่อปรับปรุงการโต้ตอบ นี่เป็นหนึ่งในสิ่งที่ต้องทำอันดับต้นๆ ของเรา
