Alpha
1.0.0
Alpha ist ein Bot bzw. eine Basis zum Erstellen Ihres eigenen webbasierten Chatbots . Wir haben dieses Projekt gestartet, weil wir der Meinung sind, dass Chatbots sehr hilfreich und sehr unterhaltsam sein können. Derzeit sind die meisten Chatbots jedoch auf bestehende Messaging-Plattformen wie Facebook beschränkt, was völlig in Ordnung ist, aber was ist, wenn Sie möchten, dass Ihr Bot woanders lebt? das Internet ?
Sie können Ihren eigenen Bot erstellen und Ihre eigenen visuellen Stile und Regeln definieren sowie unbegrenzte Kontrolle über Anpassung und Logik haben. Es gibt bereits verschiedene Lösungen, die jedoch einschränkend, kostspielig und schwer umzusetzen sein können.
Hier kommt Alpha zum Einsatz. Mit dieser Bibliothek können Sie auf sehr einfache Weise Ihren eigenen Bot erstellen. Sie müssen nur:
Herunterladen
Fügen Sie Ihren eigenen Q&A-Baum ein
Fügen Sie Ihre eigenen Farben und Bilder ein
Alpha kümmert sich um das gesamte UI-Rendering und die Handhabung des Anwendungsstatus . Sie müssen nicht unbedingt React (oder Javascript) beherrschen . Wenn Sie sich jedoch mit React und Redux auskennen, können Sie das Rendering der Bot-App weiter anpassen und sie sogar mit jedem Back-End oder jeder KI-Engine Ihrer Wahl verbinden.
Installation
Anpassen des Dialogs
Empfehlungen aussprechen
Anpassen der Benutzeroberfläche
Anpassen der React-App
E-Mails senden (TBD)
Verbindung zu einem beliebigen Back-End (TBD)
Verbindung zu AI Engines (TBD) herstellen
Alpha ist für die Ausführung auf Docker konzipiert. Sie können es jedoch lokal ausführen, solange Sie NodeJS sowie npm oder Yarn (bevorzugt!) in Ihrem System haben.
Um es auf Ihrem Computer zu installieren und auszuführen, führen Sie einfach die folgenden Befehle in Ihrem Terminal aus. Sie müssen Docker installiert haben (Anweisungen ohne Docker finden Sie weiter unten):
Klonen Sie dieses Repo: git clone https://github.com/IcaliaLabs/alpha.git
Navigieren Sie in das Verzeichnis: cd alpha
Abhängigkeiten installieren: docker-compose run --rm alpha yarn install
Dann können Sie den Server hochfahren: docker-compose up alpha
Das ist es! Sie sollten den Demo-Bot in Ihrem Browser sehen und ausführen, wenn Sie localhost:3000 * in Ihrem Browser öffnen.
Ein paar wichtige Punkte bei der Ausführung im Entwicklungsmodus:
Für die Bot-App ist Hot Reloading aktiviert, sodass Sie die Vorteile von Webpack + React nutzen können.
Redux DevTools sind standardmäßig aktiviert, sodass Sie die Aktionen/Statusänderungen der App in Echtzeit überprüfen können.
Die Zeit zwischen den einzelnen Bot-Nachrichten ist auf 0 gesetzt . Dies soll die Frustration der Entwickler minimieren, wenn sie den Konversationsablauf immer wieder durchgehen. Sie können dieses Verhalten jedoch bei Bedarf unter app/containers/BotContainer/sagas.js ändern.
Heroku: Führen Sie einfach git push heroku master aus. Dieser Bot ist Heroku-ready!
Lokal mit Docker: Wenn Sie das Image kompilieren können, um zu sehen, wie es sich in der Produktion verhält, stellen wir auch einen Build zusammen. Führen Sie einfach Folgendes aus:
docker-compose up release
Es wird das Image erstellen und den Produktionsserver hochfahren.
Wenn Sie ohne Docker installieren und ausführen möchten, müssen Sie alle Abhängigkeiten direkt in Ihrem Verzeichnis installieren:
Für die Entwicklung:
Klonen Sie dieses Repo: git clone https://github.com/IcaliaLabs/alpha.git
Navigieren Sie in das Verzeichnis: cd alpha
Führen Sie entweder npm install oder yarn install aus, um die Abhängigkeiten zu installieren
Führen Sie npm start , um den Server hochzufahren
Besuchen Sie localhost:3000 in Ihrem Browser
Für die Produktion:
Dieses Repo ist Heroku-fähig, führen Sie einfach git push heroku master aus
Wenn Sie aus irgendeinem Grund die Skripts Ihrer package.json ändern, denken Sie unbedingt über diese Schritte nach, bevor Sie sie auf einem Produktionsserver bereitstellen.
Für AWS können Sie die gleichen Schritte ausführen, die hier aufgeführt sind
Für Azure/Softlayer/andere Server müssen Sie eine SSH-Verbindung zum Server herstellen, das Repo abrufen, die Abhängigkeiten mit yarn installieren und dann npm run build ausführen, um den Ordner ./build zu erstellen. Abschließend können Sie den Server mit start:prod starten. Alternativ führen Sie einfach start:production aus und es werden diese Schritte nacheinander sowie Tests ausgeführt.
Die gesamte Logik hinter dem, was der Bot sagt, einschließlich der Frage-und-Antwort-Logik, befindet sich im BotMind unter app/BotMind/ . Wir bezeichnen jeden einzelnen Bot oder jede einzelne Benutzereingabe als Bubbles, da sie in der Chat-Benutzeroberfläche als solche gerendert werden.
Um den Dialog anzupassen, müssen Sie lediglich app/BotMind/_initialBubble.js und app/BotMind/BotMindFlows/index.js verstehen und bearbeiten.
Die Hauptdatei für BotMind ist BotMind.js , aber diese Datei fungiert nur als Sammler und Exporter der Funktionen unter _initialBubble.js , _nextBubble.js und _recommendationBubbles.js . Diese drei Dateien wiederum führen ihre Logik basierend auf den Q&A-Bäumen aus, die sich in app/BotMind/BotMindFlows/ befinden.
Hier können Sie festlegen, an welcher Stelle im Konversationsbaum Ihr Bot startet, wenn er initialisiert wird oder wenn der Benutzer die Konversation neu starten möchte.
Diese Datei enthält die Logik, zu welcher Blase oder welchem Dialog der Bot basierend auf der letzten Nachricht des Bots oder des Benutzers springen soll. Sie müssen diese Datei nicht wirklich ändern, es sei denn, Sie möchten viel feinere Anpassungen vornehmen. Das Vorgehen erfolgt auf eigene Gefahr.
Diese Datei führt die Logik der Pfadauswahl aus, wenn shouldEstimateRecommendation: true in einer Dialogblase übergeben wird. Diese Datei basiert auf den vom Taschensystem während des Gesprächs gesammelten Punkten. Sie müssen diese Datei nicht wirklich ändern, es sei denn, Sie möchten viel feinere Anpassungen vornehmen. Das Vorgehen erfolgt auf eigene Gefahr.
Die BotMindFlows live unter app/BotMind/BotMindFlows/ . Standardmäßig finden Sie hier nur eine index.js Datei, aber wenn Ihr Konversationsbaum zu groß wird, können Sie Ihre eigenen Dateien erstellen und die index.js verwenden, um sie mit dem Spread-Operator wie diesem zu kombinieren.
import greetings from './conversation1';
import designSprint from './conversation2';
import designSprintQuestions from './conversation3';
const questions = {
...conversation1,
...conversation2,
...conversation3,
}
export default questions; Jedes Mal, wenn BotMind analysiert, wohin es gehen soll (innerhalb von _nextBubble.js ), erwartet es, einen Hash von Fragen in app/BotMind/BotMindFlows/index.js zu finden. Fragen bestehen aus... Sie haben es erraten, einzelnen Frage-Antwort-Hashes. Hier können Sie damit beginnen, die Logik und den Ablauf des Gesprächs festzulegen. In unserer Demo finden Sie beispielsweise Folgendes:
const questions = {start:{botPrompt: „Hallo Mensch, mein Name ist Alpha, ich bin ein toller Chatbot“,Antworten: [{nextId: "myPurpose"}] },myPurpose:{botPrompt: „Mein Zweck ist es, ein einfacher Chatbot zu sein, der Benutzer führt und in der Lage ist, Entscheidungen zu treffen und Empfehlungen abzugeben.“, antwortet: [{nextId: "yourName"}]},yourName:{botPrompt: "Also, wie ist Ihr Name?",input: textField(),answers: [ {answer: common_greetings,nextId: "greetings_notAName", }, {answer : common_greetings_negative,catchName: true,nextId: "asYouCanSee", },],},
...}Standardfragen exportieren;Jeder Frage-Hash muss eine eigene eindeutige ID haben . Wir empfehlen Ihnen, diese IDs so selbsterklärend wie möglich zu gestalten, auch wenn das bedeutet, dass Sie etwas mehr schreiben müssen, denn je größer die Konversationsbibliothek Ihres Bots wird, desto mühsamer kann es sein, sich daran zu erinnern, welche ID das tut die folgenden Optionen:
botPrompt ([String] erforderlich): Die Nachricht vom Bot
Antworten ([Array] erforderlich): Die unterschiedlichen Antworten, die der Bot basierend auf den Antworten des Benutzers haben kann. Das Array besteht aus Hashes, die jeweils ein mögliches Gesprächsergebnis darstellen. Die Hashes in [ Antworten ] nehmen die folgenden Optionen an:
nextId ([String] erforderlich) : Bestimmt, zu welcher Dialog-ID der Bot navigiert, wenn diese Antwort erfüllt ist. Bei der letzten Nachricht von Ihrem Bot oder bevor Sie eine Empfehlung einschätzen ( siehe unten ) , sollten Sie null übergeben.
Antwort ([String | RegEx]) : Die Benutzerantwort, die diesen Hash auslöst. Wenn Sie selectField oder tagsField verwenden, um Antworten für den Benutzer vorab zu definieren, ist die Verwendung von Zeichenfolgen in Ordnung, andernfalls möchten Sie möglicherweise RegEx verwenden (siehe Beispiele).
sumToBags ([Array]) : Hier können Sie mit dem Hinzufügen von Punkten zum BagsSystem beginnen, um erweiterte Flusskontrollen durchzuführen und/oder Empfehlungen auszugeben, wenn dies der Zweck Ihres Bots ist. sumToBags sehen normalerweise so aus: sumToBags:[{name: "recommendation1", points: 1}, {name: "recommendation2", points: 3}]
CatchName ([Boolean]) : Signalisiert React, den Benutzernamen aus der Benutzernachricht im App-Status zu speichern.
CatchCompanyName ([Boolean]) : Wie oben, jedoch für einen Firmennamen.
CatchMail ([Boolean]) : Wie oben, jedoch für E-Mail-Adressen.
CatchPhone ([Boolean]) : Wie oben, jedoch für Telefonnummern.
ShouldEstimateRecommendation ([Boolean]) : Signalisiert dem BotMind, den regulären Fluss zu unterbrechen und die Empfehlungsbeutel zu analysieren, um die Konversation voranzutreiben (siehe Beispiele).
finishConversation ([Boolean]) : Signalisiert dem Bot, die Konversation beim nächsten Dialog zu beenden. In diesem Fall wird die Benutzereingabe deaktiviert und der Bot wird „offline“ gehen, bis der Benutzer „Neustart“ auswählt.
HINWEIS – Wenn Ihr botPrompt für diesen Dialogteil keine Auswirkungen erwartet, können Sie nextId einfach wie folgt übergeben:
answers: [
{
nextId: "hello"
}
] Eingabe ([Objekt]) : Dies bestimmt, welche Art von Eingabe dem Benutzer während dieses BotPrompts zur Verfügung steht (Textfeld, Tags, Auswählen, Deaktiviert usw.). Standardmäßig sind Eingaben deaktivierte Textfelder. Wir empfehlen die Verwendung der StateFormatter -Helfer, die am Anfang der Datei index.js enthalten sind.
Typ ([String]) : Welche Art von Nachricht sendet der Bot („text“, „media“, „link“ oder „transformedText“).
varName ([String]) : Wenn Sie „transformedText“ als Eingabetyp wählen, können Sie @varName in botPrompt schreiben, das auf diese Option verweist. Wenn der Bot die Nachricht rendert, sucht er nach der im React-Status gespeicherten Variablen ( siehe unten ) und ersetzt @varName durch den Wert dieser Variablen.
Wie oben erwähnt, können Sie einige Werte im React-Status speichern und später eine Reaktion/einen Ablauf/eine Empfehlung basierend auf diesen Werten berechnen. Wir nennen dies das Taschensystem.
Das Konzept des Taschensystems besteht darin, dass wir einige „ Taschen “ vordefinieren, die wir im Verlauf des Gesprächs mit „ Punkten “ füllen können. Wenn Sie sich schließlich entscheiden, shouldEstimateRecommendation: true für einen Ihrer Frage-Antwort-Hashes aufzurufen, wird _recommendationBubbles.js in Aktion gesetzt, um zu entscheiden, was als Nächstes angezeigt werden soll, basierend auf der Anzahl der Punkte, die jede Tasche gesammelt hat.
Der erste Schritt besteht darin, die Taschen zu definieren, die Sie unter /app/BotMind/recommendationBags.js verwenden möchten. Wenn Sie diese Taschen nicht definieren, funktioniert der Bot, weiß aber nicht, was er tun soll, wenn Sie addToBags oder shouldEstimateRecommendation aufrufen. Die Taschen sehen so aus:
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; Anschließend können Sie mithilfe von addToBags in Ihren Frage-Antwort-Abläufen definieren, wann etwas hinzugefügt werden soll, zum Beispiel:
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}]
},
...
]
} Und wenn Sie bereit sind, rufen Sie einfach shouldEstimateRecommendation wie folgt an:
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}]
},
...
]
}, In diesem Beispiel wird _recommendationBubbles.js aufgerufen und daher wird die nächste Bot-Blase wahrscheinlich die bei redWine_start sein.
Wir haben uns die Freiheit genommen, eine Benutzeroberfläche vorzudefinieren, um Ihnen etwas Zeit zu sparen.
Die überwiegende Mehrheit der Bot-Stile wird von einer einzigen Datei gesteuert, /app/customization/styleVariables.js . Hier können Sie praktisch alle für alle Elemente verwendeten Farben sowie den Hintergrund der Benutzeroberfläche ändern.
Wenn Sie weitere Änderungen an der Benutzeroberfläche vornehmen möchten, können Sie direkt in den Stylesheet- Dateien stöbern. Es gibt eine globale Datei unter /app/global-styles.js und einige Komponenten oder Container haben ihre eigenen styledComponents.js Dateien in ihren jeweiligen Ordnern für bestimmte modulare Komponenten. Diese Dateien verwenden Styled-Components , eine ziemlich tolle Bibliothek für React/ES6 (die offiziell als Best-Practice-Hilfe gilt). Diese Dateien verwenden die getaggten Vorlagenliterale von Javascript, um JS-Variablen mit CSS zu interpolieren, aber keine Panik , diese können so ziemlich wie normales CSS/SCSS behandelt werden.
HINWEIS – Unsere Absicht ist es, schrittweise zu 100 % unabhängigen, modular gestalteten Komponenten zu migrieren, wie sie unter /app/components/UserInput/styledComponents.js zu finden sind, und so ziemlich den gesamten Code unter /app/global-styles.js zu entfernen
Wenn Ihre Anpassungswünsche nicht durch einfaches Hantieren mit dem CSS der Komponenten erfüllt werden, können Sie so ziemlich alles andere nach Ihren Wünschen anpassen, aber darüber hinaus müssen Sie sich mit der React (+Redux)-Seite der App befassen ( siehe unten ).
Die gesamte React-Seite von Alpha wurde auf der Grundlage dieses großartigen Repos überarbeitet. Nutzung der am besten etablierten Best Practices für React, nämlich der Verwendung von:
Redux
ImmutableJS
Neu auswählen
Redux-Saga
Gestylte Komponenten
Wenn Sie mit der React-Seite von Alpha herumspielen möchten, schauen Sie sich am besten zuerst diese Dokumente an.
Wir sind sicher, dass Sie automatisierte E-Mails mit einer Zusammenfassung ihrer Konversation oder Ähnlichem an den Bot-Besitzer und die Endbenutzer senden möchten, und wir arbeiten an einer Möglichkeit, die flexibelste und Back-End-unabhängige Lösung anzubieten, die Dies ermöglicht praktisch nur „Plug & Play“.
Im Moment ist es am besten, dies an einen Node- oder Express-Server (oder Rails 5.1.x) anzuschließen und deren eigene Mailer-Lösungen zu nutzen. Sie können einen Blick auf die Datei /app/BotMind/BotMailer.js werfen, die wir für unsere Rails-basierte Implementierung verwenden. Ab sofort haben wir jedoch die gesamte Logik zum Senden von E-Mails aus /app/containers/BotContainer/sagas.js , also müssten Sie Ihre eigenen Sagen schreiben.
Dieser Bot basiert nur auf React + Webpack, was bedeutet, dass Sie ihn mit jedem Framework, Back-End usw. verbinden können sollten, solange er mit Webpack funktioniert.
Im Moment kann sich der Bot nahtlos mit jeder API verbinden, aber Sie müssen Ihre eigenen Aktionsersteller und Sagen aufschreiben, um das gewünschte Verhalten zu erhalten.
Wir werden hier im Laufe der Zeit Dokumentation hinzufügen, während wir diesen Bot für verschiedene Implementierungen anpassen.
Wie oben beabsichtigen wir, diesem Bot die Verbindung mit anderen Engines für künstliche Intelligenz wie Api.ai und IBM Watson zu ermöglichen, um die Interaktionen zu verbessern. Das ist eines unserer Top-To-Dos.
