chat bubble herunterladen - chat bubble -Quellcode herunterladen

chat bubble

AI-Quellcode

RASA NLC support

Herunterladen

`chat-bubble` ??

Einfache Chatbot-Benutzeroberfläche für das Web mit JSON-Skripting?

Screenshot

Schnelle Einrichtung und Implementierung.
Funktioniert mit oder ohne Klassifikatoren natürlicher Sprache.
1 KB GZipped. Keine Abhängigkeiten. Geschrieben mit ES5 (kompatibel mit IE11+).

Demo | Tutorial-Video

Installation

Garn/NPM

yarn add chat-bubble oder npm install chat-bubble

Herunterladen

Holen Sie sich die .ZIP-Datei hier.

Schnellstart

Bei dieser Methode wird davon ausgegangen, dass eine Entwicklungsumgebung ausgeführt wird, die ES6-JavaScript transpilieren kann. Hier finden Sie eine kurze Anleitung, wie Sie einen zum Laufen bringen. Ansonsten siehe „Ich habe keine ES6-Entwicklungsumgebung.“ Diese Anleitung zeigt Ihnen, wie Sie dies erstellen.

 /************************************************************************/
/******* CONVENIENCE METHODS AVAILABLE FOR ES6 BUILD ENVIRONMENTS *******/
/************************************************************************/

// the URL of where you've installed the component; you may need to change this:
import {
  Bubbles ,
  prepHTML
} from "../node_modules/chat-bubble/component/Bubbles.js" ;

// this is a convenience script that builds all necessary HTML,
// imports all scripts and stylesheets; your container DIV will
// have a default `id="chat"`;
// you can specify a different ID with:
// `container: "my_chatbox_id"` option
prepHTML ( { relative_path : "../node_modules/chat-bubble/" } ) ;

/************************************************************************/
/************************ SAMPLE IMPLEMENTATION *************************/
/************************************************************************/

// initialize by constructing a named function...
const chatWindow = new Bubbles (
  document . getElementById ( "chat" ) , // ...passing HTML container element...
  "chatWindow" // ...and name of the function as a parameter
) ;

// `.talk()` will get your bot to begin the conversation
chatWindow . talk (
  // pass your JSON/JavaScript object to `.talk()` function where
  // you define how the conversation between the bot and user will go
  {
    // "ice" (as in "breaking the ice") is a required conversation object
    // that maps the first thing the bot will say to the user
    ice : {
      // "says" defines an array of sequential bubbles
      // that the bot will produce
      says : [ "Hey!" , "Can I have a banana?" ] ,

      // "reply" is an array of possible options the user can pick from
      // as a reply
      reply : [
        {
          question : "?" , // label for the reply option
          answer : "banana" // key for the next conversation object
        }
      ]
    } , // end required "ice" conversation object

    // another conversation object that can be queued from within
    // any other conversation object, including itself
    banana : {
      says : [ "Thank you!" , "Can I have another banana?" ] ,
      reply : [
        {
          question : "??" ,
          answer : "banana"
        }
      ]
    } // end conversation object
  } // end conversation object
) ;

„Ich habe keine ES6-Entwicklungsumgebung!“

Wenn Sie sich nicht mit der Einrichtung eines Entwicklungsservers und Transpilers für ES6-Code beschäftigen möchten, verstehe ich das. Entpacken Sie einfach das Paket und erstellen Sie index.html in diesem Verzeichnis. Fügen Sie dann das gesamte JavaScript hinzu, das Sie im obigen Codebeispiel unter dem Kommentar /*SAMPLE IMPLEMENTATION*/ sehen. Ersetzen Sie const durch var .

 <!DOCTYPE html >
< html lang =" en " >
  < head >
    < meta charset =" UTF-8 " />
    < title > My chat-bubble Project </ title >

    <!-- stylesheets are conveniently separated into components -->
    < link rel =" stylesheet " media =" all " href =" ../styles/setup.css " />
    < link rel =" stylesheet " media =" all " href =" ../styles/says.css " />
    < link rel =" stylesheet " media =" all " href =" ../styles/reply.css " />
    < link rel =" stylesheet " media =" all " href =" ../styles/typing.css " />
    < link rel =" stylesheet " media =" all " href =" ../styles/input.css " />
  </ head >
  < body >
    <!-- container element for chat window -->
    < div id =" chat " > </ div >

    <!-- import the JavaScript file -->
    < script src =" ./component/Bubbles.js " > </ script >
    < script >
      /************************************************************************/
      /**************** add "SAMPLE IMPLEMENTATION" code here *****************/
      /************************************************************************/
    </ script >
  </ body >
</ html >

Öffnen Sie nun diese Datei in Ihrem Browser. Erledigt!

Demos und weitere Anwendungsbeispiele:

Einfaches Beispiel: Sehen Sie, wie der obige Code im Browser aussieht.
Benutzerdefinierter Startpunkt: Was wäre, wenn Sie das Gespräch an einem anderen Ort als dem erforderlichen ice:{} -Startpunkt fortsetzen möchten? So würden Sie es machen.
Tastatureingabe: eine grundlegende Plugin-ähnliche Struktur, mit der Sie Ihre eigene Tastatureingabe und Texterkennung implementieren können (obwohl natürliche Sprache nicht verarbeitet wird).
Skripte ausführen: Die Antworten Ihres Bots können Dinge bewirken. Es könnte nicht nur etwas sagen, sondern Ihren Benutzer auch auf eine Aktion hinweisen oder diese durch Ausführen von JavaScript ausführen.
Die Implementierung des Natural Language Classifier ist mit zusätzlichem Aufwand möglich, indem die Antwortnachricht und Tastatureingaben abgefangen werden. Ein Beispiel für die Verwendung von RASA (Dokumente) finden Sie hier.

Den Quellcode und weitere Ideen finden Sie im Ordner /examples .

FAQ:

Kann ich meinem Bot Bilder und HTML-Code hinzufügen?
- Ja! individuelle Grafiken, YouTube-Videos – was immer Sie wollen!
Wie kann ich einen Beitrag leisten?
- Den Beitragsleitfaden finden Sie hier.
- Kauf mir einen Kaffee: Benutze den GH-Button „Sponsor“ oder mache es über https://ko-fi.com/dmitrizzle