Download chat bubble - download do código-fonte chat bubble

chat bubble

Código-Fonte de IA

RASA NLC support

Baixar

`chat-bubble` ??

UI de chatbot simples para a Web com script JSON ??

Captura de tela

Configuração e implementação rápidas.
Funciona com ou sem classificadores de linguagem natural.
1 KB compactado em G. Sem dependências. Escrito com ES5 (compatível com IE11+).

Demonstração | Vídeo tutorial

Instalação

Fio/NPM

yarn add chat-bubble ou npm install chat-bubble

Download

Obtenha o arquivo .ZIP aqui.

Início rápido

Este método pressupõe que você tenha um ambiente de desenvolvimento em execução capaz de transpilar JavaScript ES6. Há um breve guia sobre como fazer um funcionar aqui. Caso contrário, consulte "Não tenho ambiente de desenvolvimento ES6". Este guia mostrará como construir isso.

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

"Não tenho ambiente de desenvolvimento ES6!"

Se você não quiser se preocupar em configurar um servidor de desenvolvimento e um transpilador para código ES6, eu entendo. Simplesmente descompacte o pacote e crie index.html dentro desse diretório. Em seguida, adicione todo o JavaScript que você vê abaixo do comentário /*SAMPLE IMPLEMENTATION*/ no exemplo de código acima. Substitua const por 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 >

Agora abra este arquivo em seu navegador. Feito!

Demonstrações e mais exemplos de uso:

Exemplo básico: veja como fica o código acima no navegador.
Ponto de partida personalizado: e se você quisesse retomar a conversa de algum lugar diferente do ponto de partida obrigatório ice:{} ? É assim que você faria.
Entrada de teclado: uma estrutura básica semelhante a um plug-in que permite implementar sua própria entrada de teclado e reconhecimento de texto (embora não processe linguagem natural).
Execute scripts: as respostas do seu bot podem fazer coisas. Não apenas pode dizer algo, mas também direcionar o usuário para uma ação ou executá-la executando JavaScript.
A implementação do Classificador de Linguagem Natural é possível com esforço adicional, interceptando a mensagem de resposta e a entrada do teclado. Exemplo de uso de RASA (documentos) pode ser encontrado aqui.

Confira a pasta /examples para o código-fonte e mais ideias.

PERGUNTAS FREQUENTES:

Posso adicionar imagens e código HTML ao meu bot?
- Sim! gráficos personalizados, vídeos do YouTube - o que você quiser!
Como posso contribuir?
- Veja o guia de contribuição aqui.
- Compre um café para mim: use o botão "Patrocinar" do GH ou faça-o via https://ko-fi.com/dmitrizzle