chat bubble Télécharger - chat bubble Téléchargement du code source

chat bubble

Code Source AI

RASA NLC support

Télécharger

`chat-bubble` ??

Interface utilisateur de chatbot simple pour le Web avec script JSON ??

Capture d'écran

Configuration et mise en œuvre rapides.
Fonctionne avec ou sans classificateurs de langage naturel.
1 Ko GZippé. Aucune dépendance. Écrit avec ES5 (compatible avec IE11+).

Démo | Vidéo tutoriel

Installation

Fil/NPM

yarn add chat-bubble ou npm install chat-bubble

Télécharger

Obtenez le fichier .ZIP ici.

Démarrage rapide

Cette méthode suppose que vous disposez d’un environnement de développement en cours d’exécution capable de transpiler le JavaScript ES6. Il y a un petit guide sur la façon d'en faire fonctionner un ici. Sinon, consultez « Je n'ai pas d'environnement de développement ES6 ». Ce guide vous montrera comment construire cela.

 /************************************************************************/
/******* 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
) ;

"Je n'ai pas d'environnement de développement ES6 !"

Si vous ne voulez pas vous soucier de la configuration d'un serveur de développement et d'un transpilateur pour le code ES6, je comprends. Décompressez simplement le package et créez index.html dans ce répertoire. Ajoutez ensuite tout le JavaScript que vous voyez sous le commentaire /*SAMPLE IMPLEMENTATION*/ dans l'exemple de code ci-dessus. Remplacez const par 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 >

Ouvrez maintenant ce fichier dans votre navigateur. Fait!

Démos et autres exemples d'utilisation :

Exemple de base : voyez à quoi ressemble le code ci-dessus dans le navigateur.
Point de départ personnalisé : que se passe-t-il si vous souhaitez reprendre la conversation depuis un autre endroit que le point de départ ice:{} ? C'est comme ça que vous procéderiez.
Saisie au clavier : une structure de base de type plugin qui vous permet d'implémenter votre propre saisie au clavier et votre propre reconnaissance de texte (bien qu'elle ne traite pas le langage naturel).
Exécutez des scripts : les réponses de votre bot peuvent faire des choses. Non seulement il pourrait dire quelque chose, mais il pourrait également orienter votre utilisateur vers une action ou l'exécuter en exécutant JavaScript.
La mise en œuvre du Natural Language Classifier est possible avec un effort supplémentaire en interceptant le message de réponse et la saisie au clavier. Un exemple utilisant RASA (documents) peut être trouvé ici.

Consultez le dossier /examples pour le code source et plus d’idées.

FAQ :

Puis-je ajouter des images et du code HTML à mon bot ?
- Oui! graphiques personnalisés, vidéos YouTube - tout ce que vous voulez !
Comment puis-je contribuer ?
- Voir le guide de contribution ici.
- Achetez-moi un café : utilisez le bouton GH "Parrainer" ou faites-le via https://ko-fi.com/dmitrizzle