bert-ai.html

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="js/tfjs.js"> </script>
<script src="js/qna/qna.js"> </script>
<div id="question" style="background-color: #efef75a6; width: 45em; padding: 20px;">Loading. Please wait.</div>

<textarea id="passage" rows="30" cols="100" style="background-color: #efff75a6; padding: 20px;">
What does the AI block library consist of?
The library of Snap! blocks can be used for speaking, listening, and seeing. And there are blocks for doing natural language processing, transfer learning, and creating deep learning neural nets.
What blocks are there for speaking?
There is a speech synthesis block named "speak" that just says what you type as its input. And there a version that lets you choose the language, voice, volume, pitch, and speed of speaking. Different browsers and operating systems support different languages and voices. 
How can I make my program hear what is said?
There is a simple reporter called 'the next thing spoken' that listens for speech and reports the next thing spoken. THere are also full-featured blocks for doing more advanced things. The speech recognition blocks work best in Chrome where there is support for over 100 languages.
</textarea>
<script>
  const questions_answers = document.getElementById('question');
  const passage = document.getElementById('passage');
  let model;
  let question = "";
  qna.load().then(m => {
    model = m;
    questions_answers.innerHTML = "Type your questions followed by the Enter key.<br><br>";
    questions_answers.focus();
  });
  document.addEventListener('keydown',
    (event) => {
      if (!model) return;
      if (document.activeElement === passage) {
        return;
      }
      if (event.key === 'Shift' || event.key === 'Control' || event.key === 'Delete') return;
      if (event.key === 'Backspace') {
        questions_answers.innerHTML = questions_answers.innerHTML.slice(0, questions_answers.innerHTML.length-1);
        return;
      }
      if (event.key !== 'Enter') {
        questions_answers.innerHTML += event.key;
        question += event.key;
        return;
      }
      let dialog = questions_answers.innerHTML;
      questions_answers.innerHTML += "...";
      model.findAnswers(question, passage.value).then(answers => {
        console.log('Question: ', question, 'Answers: ', answers);
        question = "";
        if (answers.length === 0) {
          dialog += "<br><b>Sorry can't answer that. Please try another question.</b><br>";
        } else {
          dialog += "<br><b>" + answers[0].text + " (score: " + answers[0].score.toPrecision(3) + ")</b><br>";
        }
        questions_answers.innerHTML = dialog;
//           let response = "";
//           answers.forEach((answer, index) => {
//             response += index + ". " + answer.text + " (" + answer.score.toPrecision(3) + ")<br>";
//           });
//           answer.innerHTML = response;
//         }

      });
    });
</script>