Скрыть / показать div p5. js - PullRequest
Новая
       85

Скрыть / показать div p5. js

1 голос
/ 23 апреля 2020

Я использую библиотеку p5. js, и я работаю над проектом распознавания речи - преобразования текста в речь. Вид чатбота. Ввод - это голосовой ввод, который становится строкой. Я выводу результат из текстового файла, используя цепочку Маркова. Выводом является строка, содержащаяся в div.

Мой вопрос:

Есть ли способ скрыть / показать div, содержащий мой ввод / вывод (.myMessage и .robotMessage) в интервалы? Я хочу, чтобы весь экран сначала отображал только ввод, когда я говорю, затем ввод исчезает и отображается только вывод, затем, когда компьютерный голос заканчивает говорить, мой ввод отображается на экране и так далее ...

Здесь некоторые части кода, дайте мне знать, если он достаточно ясен. 

//bot
function setup() {
  noCanvas();

   //reads and checks into the text file
   for (var j = 0; j < names.length; j++) {
    var txt = names[j];
    for (var i = 0; i <= txt.length - order; i++) {
      var gram = txt.substring(i, i + order);
      if (i == 0) {
        beginnings.push(gram);
      }

      if (!ngrams[gram]) {
        ngrams[gram] = [];
      }
      ngrams[gram].push(txt.charAt(i + order));
    }

  }

  //voice recognition
  let lang = 'en-US';
  let speechRec = new p5.SpeechRec(lang, gotSpeech);

  let continuous = true;
  let interim = false;
  speechRec.start(continuous, interim);

  //text-to-speach
  speech = new p5.Speech(); 
  speech.onLoad = voiceReady;

  function voiceReady() {
    console.log('voice ready');
  }

  //input-ouput
  function gotSpeech() {
    if (speechRec.resultValue) {
      var p = createP(speechRec.resultString);
      p.class('myMessage');
    }
     markovIt();
     chooseVoice(); 
     speech.speak(answer);

  }
}

и 

function markovIt() {
  var currentGram = random(beginnings);
  var result = currentGram;


  for (var i = 0; i < 100; i++) {
    var possibilities = ngrams[currentGram];
    if (!possibilities) {
      break;
    }
    var next = random(possibilities);
    result += next;
    var len = result.length;
    currentGram = result.substring(len - order, len);
  }

  var answer = result;
  window.answer = answer;
  var p2 = createP(answer);
  p2.class('robotMessage');
}

как HTML выглядит 

<div class="container">
    <div class="myMessage"></div>
    <div class="robotMessage"></div>
</div>

1 Ответ

0 голосов
/ 23 апреля 2020

Используйте select(), чтобы получить элемент документа по его идентификатору, классу или имени тега. Например: 

let my_div = select("myMessage");

Изменить стиль элемента на style().

например, скрыть: 

my_div.style("display", "none");

например, показать: 

my_div.style("display", "block");

См. Также Переключить скрыть и показать

...