Rasa-dev-tutorial Alternatives

rasa-dev-tutorial reviews and mentions

• RASA - Giving voice to web chatbot
  1 project | dev.to | 28 Jul 2022

  We already had the and and only added the two elements which contain a element. We want the feature to be disabled by default and display only the volume off icon. Hence we hide the volume on icon by adding style="display: none" to it. Styles Let's make the button nicer by adding this to the tag in the :
  

  .voice-icon {
      fill: currentColor;
      font-size: 22px;
      width: 1em;
  }
  

  Enter fullscreen mode Exit fullscreen mode

  This should be the result:

  

  JavaScript

  The last step is to add the behaviour.
  Let's create a toggleVoice function and add it as a click listener to the two buttons.
  

  let voiceEnabled = false;
  const iconVolumeOn = document.getElementById('icon-volume-on');
  const iconVolumeOff = document.getElementById('icon-volume-off');
  
  function toggleVoice() {
      if (voiceEnabled) {
          voiceEnabled = false;
          iconVolumeOn.style.display = 'none';
          iconVolumeOff.style.display = 'block';
      } else {
          if ('speechSynthesis' in window) {
              voiceEnabled = true;
              iconVolumeOn.style.display = 'block';
              iconVolumeOff.style.display = 'none';
          } else {
              alert("Sorry, your browser doesn't support text to speech.");
          }
      }
  }
  
  iconVolumeOn.addEventListener('click', toggleVoice);
  iconVolumeOff.addEventListener('click', toggleVoice);
  

  Enter fullscreen mode Exit fullscreen mode

  Depending on whether the voice is enabled or disabled, the function displays the appropriate icon and hides the other icon. It also sets voiceEnabled accordingly. The voice is enabled only when the SpeechSynthesis API is supported by the user's browser (this API is described later on).

  You can now toggle the button:

  

  For the text-to-speech, we'll use Web Speech API. It allows us to create a SpeechSynthesisUtterance instance to which we assign a text.
  When this instance is passed to the window.speechSynthesis.speak function, the browser reads the text aloud.

  We want to read aloud every message from the chatbot after it is received, therefore we add this code at the end of the appendMessage function:
  

  if (voiceEnabled && type === "received") {
      const voiceMsg = new SpeechSynthesisUtterance();
      voiceMsg.text = msg;
      window.speechSynthesis.speak(voiceMsg);
  }
  

  Enter fullscreen mode Exit fullscreen mode

  That's it!

  Run the application

  1. Serve the application on http://localhost:8080 by running npx http-server webchat.
  2. In a new terminal window, run the rasa server with enabled cors for all origins: rasa run --cors "*".
  3. In another terminal window, run the actions server: rasa run actions.
  4. Open http://127.0.0.1:8080 and chat with the chatbot!

  
  Repository for this tutorial:
  

  petr7555 / rasa-dev-tutorial

  You can checkout the state of the repository at the end of this tutorial by running:
  

  git clone --branch 23-text-to-speech [email protected]:petr7555/rasa-dev-tutorial.git
  

  Enter fullscreen mode Exit fullscreen mode

• RASA - Socket.IO integration
  2 projects | dev.to | 30 Aug 2021

  All that is left is a client. Create a folder named webchat in the Rasa chatbot project. Inside the webchat folder, create a new index.html file. This file will contain the source code for the interactive web chat. You can view the complete code here.

• RASA - Custom submit action
  1 project | dev.to | 27 Jul 2021

  Add the action also to the tests.

• A note from our sponsor - SaaSHub
  www.saashub.com | 2 May 2024

  SaaSHub helps you find the best software and product alternatives Learn more →